我按照本教程https://reactnavigation.org/docs/intro/的操作 ,遇到了一些问题。
我每次都使用Expo Client应用程序而不是模拟器/模拟器来渲染我的应用程序。
我的代码如下所示。
我最初在“ ChatScreen”组件上方定义了“ SimpleApp” const,但这给了我以下错误:
路线“聊天”应声明一个屏幕。例如:…等
因此我将SimpleApp的权限移至“ AppRegistry”上方,这标志着一个新错误
元素类型无效:预期的字符串.....您可能忘记了导出组件..etc
本教程没有向任何组件添加关键字“导出默认值”,我认为这可能与im在Expo应用程序上运行它有关。所以我在“ HomeScreen”中添加了“ export default”,错误消失了。
我似乎无法摆脱的新错误(基于下面的代码)如下:
未定义不是对象(评估“ this.props.navigation.navigate”)
除非删除“ const {navigate}”周围的“ {}”,否则我无法摆脱它,但是当我从主屏幕上按按钮时,这将破坏导航
import React from 'react'; import {AppRegistry,Text,Button} from 'react-native'; import { StackNavigator } from 'react-navigation'; export default class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const { navigate } = this.props.navigation; return ( <View> <Text>Hello, Chat App!</Text> <Button onPress={() => navigate('Chat')} title="Chat with Lucy" /> </View> ); } } class ChatScreen extends React.Component { static navigationOptions = { title: 'Chat with Lucy', }; render() { return ( <View> <Text>Chat with Lucy</Text> </View> ); } } const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen }, }); AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
使用Expo时,您不应该自己注册应用程序,而应该让Expo自己进行注册,请记住,您必须始终导出默认组件:此外,您还需要从react- native导入View和Button:请在下面找到完整内容码:
import React from 'react'; import { AppRegistry, Text, View, Button } from 'react-native'; import { StackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const { navigate } = this.props.navigation; return ( <View> <Text>Hello, Chat App!</Text> <Button onPress={() => navigate('Chat', { user: 'Lucy' })} title="Chat with Lucy" /> </View> ); } } class ChatScreen extends React.Component { // Nav options can be defined as a function of the screen's props: static navigationOptions = ({ navigation }) => ({ title: `Chat with ${navigation.state.params.user}`, }); render() { // The screen's current route is passed in to `props.navigation.state`: const { params } = this.props.navigation.state; return ( <View> <Text>Chat with {params.user}</Text> </View> ); } } const SimpleAppNavigator = StackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen } }); const AppNavigation = () => ( <SimpleAppNavigator /> ); export default class App extends React.Component { render() { return ( <AppNavigation/> ); } }