React Navigation - 无法读取未定义的属性“导航" [英] React Navigation - cannot read property 'navigate' of undefined
问题描述
我一直在尝试使用 react navigation 启动并运行,但我遇到了当我尝试将导航项移动到它们自己的组件中时出现问题.
I've been trying to get up and running with react navigation but I run into a problem when I try to move navigation items into their own components.
HomeScreen.js
HomeScreen.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text
} from 'react-native';
import NavButton from '../components/NavButton'
class HomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Hello World
</Text>
<NavButton
navigate={this.props.navigator}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
export default HomeScreen;
然后在 NavButton 组件中,我尝试导航到新屏幕.
Then in the NavButton component I try to navigate to the new screen.
class NavButton extends Component {
render() {
return (
<View>
<Button
title="Go to About"
onPress={() => this.props.navigator.navigate('About')}
/>
</View>
);
}
}
export default NavButton;
但我一直收到错误无法读取未定义的属性‘导航’.
But I keep getting the error "Cannot read property 'navigate' of undefined.
这也是我的 Router.js 文件.
Here is my Router.js file as well.
import React from 'react';
import {StackNavigator} from 'react-navigation';
import HomeScreen from '../screens/HomeScreen'
import AboutScreen from '../screens/AboutScreen'
export const AppNavigator = StackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: AboutScreen
}
})
推荐答案
如果将 navigate={this.props.navigator}
重命名为 navigator={this.props.navigation}
,它应该可以工作,因为在 NavButton 中你正在调用 this.props.navigator.navigate
.
If you rename navigate={this.props.navigator}
to navigator={this.props.navigation}
, it should work because in NavButton you are calling this.props.navigator.navigate
.
这篇关于React Navigation - 无法读取未定义的属性“导航"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!