React Native-导航问题“未定义不是对象(this.props.navigation.navigate)" [英] React Native - navigation issue "undefined is not an object (this.props.navigation.navigate)"
问题描述
我正在按照本教程 https://reactnavigation.org/docs/intro/进行操作遇到一些问题.
Im following this tutorial https://reactnavigation.org/docs/intro/ and im running into a bit of issues.
我每次都使用Expo Client应用程序而不是模拟器/模拟器来呈现我的应用程序.
Im using the Expo Client app to render my app every time and not a simulator/emulator.
我的代码如下所示.
我最初在"ChatScreen"组件上方定义了"SimpleApp" const,但这给了我以下错误:
I originally had the "SimpleApp" const defined above "ChatScreen" component but that gave me the following error:
路线聊天"应声明一个屏幕.例如:... etc
Route 'Chat' should declare a screen. For example: ...etc
所以我将SimpleApp的权限移到了"AppRegistry"的上方,并标记了一个新错误
so I moved the decleration of SimpleApp to just above "AppRegistry" and that flagged a new error
元素类型无效:预期的字符串.....您可能忘记了导出组件..etc
Element type is invalid: expected string.....You likely forgot to export your component..etc
该教程未在任何组件中添加关键字导出默认值",我认为这可能与在Expo应用程序上运行im的事实有关?所以我在"HomeScreen"中添加了"export default",错误消失了.
the tutorial did not add the key words "export default" to any component which I think it may have to do with the fact that im running it on the Expo app? so I added "export default" to "HomeScreen" and the error went away.
我似乎无法摆脱的新错误(基于下面的代码)如下:
The new error that I cant seem to get rid off(based on the code below) is the following:
未定义不是对象(正在评估'this.props.navigation.navigate')
undefined is not an object (evaluating 'this.props.navigation.navigate')
除非删除"const {navigate}"周围的"{}",否则我将无法摆脱它,但是当我按下主屏幕上的按钮时,这将破坏导航
I can't get rid of it unless I remove the "{}" around "const {navigate}" but that will break the navigation when I press on the button from the home screen
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:请在下面的完整代码中找到:
With Expo you should't do the App registration your self instead you should let Expo do it, keeping in mind that you have to export default component always: Also you need to import View and Button from react-native: please find below the full code:
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/>
);
}
}
这篇关于React Native-导航问题“未定义不是对象(this.props.navigation.navigate)"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!