react-native - 路由组件必须是 React 组件
问题描述
我正在尝试使用 React native 和 Expo 制作一个应用程序。我试图从我的 Profiel.js 导航到 ChoosePhoto.js。当我在我的 android 模拟器上打开应用程序时,我收到错误“路由 ProfielS 的组件必须是 React 组件。
导航员
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ProfielScreen from '../screens/Profiel';
import PhotoScreen from '../screens/ChoosePhoto';
const ProfielNavigator = createStackNavigator ({
ProfielS: ProfielScreen,
PhotoS: PhotoScreen
});
export default createAppContainer(ProfielNavigator);
我的 app.js
import React from 'react';
import { Text, View, StyleSheet, } from 'react-native';
import ProfielNavigator from './navigation/ProfielNavigator';
export default function App() {
return (
<ProfielNavigator />
);
};
我的 profiel.js
import React from 'react';
import { Text, View, StyleSheet, Button, Fragement } from 'react-native';
export class GebruikerScherm extends React.Component {
componentWillMount() {
this.getData();
}
constructor() {
super();
this.state = {
gebruikerId: 2,
currentPerson: {},
}
}
getData = () => {
return fetch('(my ip adress)/gebruiker/id?gebruikerId=' + this.state.gebruikerId, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({ currentPerson: responseJson });
console.log(this.state.currentPerson);
})
.catch((error) => {
console.error(error);
});
}
render() {
return(
<View style={styles.container}>
<Text> Gebruiker: {this.state.currentPerson.gebruikerID} </Text>
<Text> Gebruiker: {this.state.currentPerson.gebruikerNaam} </Text>
<Text> Gebruiker: {this.state.currentPerson.biografie} </Text>
</View>
);
};
};
export const ProfielScreen = props =>{
return(
<View style={styles.container}>
<Button title="Profielfoto" onPress={() => {
props.navigation.navigate({
routeName: 'PhotoS'
});
}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 200,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
选择photo.js
import React from 'react';
import { Text, View, StyleSheet, } from 'react-native';
const ChoosePhotoScreen = props =>{
return(
<View style={styles.container}>
<Button title="Profielfoto" onPress={() => {
props.navigation.navigate({
routeName: 'PhotoS'
});
}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default ChoosePhotoScreen;
我希望我的 profiel.js 页面带有一个按钮。通过 onpress 操作,我想从 profiel.js 转到 choosephoto.js,但页面甚至无法加载。
解决方案
你带入物品的方式是错误的。
您尝试使用的对象export
只是。不是export default
你的 profiel.js
export const ProfielScreen = props =>{
return(
<View style={styles.container}>
<Button title="Profielfoto" onPress={() => {
props.navigation.navigate({
routeName: 'PhotoS'
});
}} />
</View>
);
};
你的 Choosephoto.js
...
export default ChoosePhotoScreen;
用法
import { ProfielScreen } from '../screens/Profiel';
import ChoosePhotoScreen as PhotoScreen from '../screens/ChoosePhoto';
...
const ProfielNavigator = createStackNavigator ({
ProfielS: ProfielScreen,
PhotoS: PhotoScreen
});
例子
import React from 'react'
这实质上是说“从反应模块中找到默认导出并将其作为我想要调用的常量导入React
。”
import { React } from 'react'
这表示“从明确命名为 React 的 react 模块中找到导出,并将其作为我要调用的常量导入此处React
。”
推荐阅读
- api - 如何将使用 WSO2 EI 创建的 REST API 部署到 WSO2 API Manager
- c# - 将值从窗口返回到 WPF 类
- javascript - javascript/react - 带有 for 循环 POST 请求的异步/等待
- ruby - 将匹配不以“km”结尾的字母和数字组合的正则表达式
- mysql - 关系数据库与对象关系数据库
- ios - CAGradientLayer 不显示
- javascript - 如何为 DOM 创建的对象分配唯一标识符?
- c# - 将 Json 转换为带有转义字符的字符串
- javascript - 更新排名 Javascript SetInterval 仅适用于第一次执行
- kubernetes - 如何使用 dns 获取 Pod IP?