React Native 中的堆栈导航器。错误 "undefined is not an object (evaluating this.props.navigation)"

Question

我花了很长时间才弄清楚显而易见的事情，希望得到一些帮助。

我使用的是堆栈导航器，当按下一个按钮时，它只会转到另一个页面。

在 app.js 我创建了一个堆栈导航器：

const Switcher = createStackNavigator(
  {
    TaskPg: ListScreen,
    AboutPg: AboutScreen
  },
  {
    initialRouteName: "TaskPg",
    defaultNavigationOptions: {
      title: 'BlueList'
    }
  }
)

在 ListScreen 中有一个按钮，用户可以按此按钮转到“关于”页面。

const ListScreen = () => {


    return (
        <View style={styles.container}>

            {/* add task component with date picker */}
            <AddItemModel />

            {/* button pressed to goto About Screen */}
            <Button
                onPress={() => this.props.navigation.navigate(AboutScreen)}
                title="About App" />

            {/* sign out button linked to firebase log out */}
            <TouchableOpacity onPress={() => firebase.auth().signOut()} >
                <Text style={styles.button} >Sign Out</Text>
            </TouchableOpacity>

        </View>
    );

}

export default ListScreen

运行代码，每次按下按钮时，我都会收到错误 undefined is not an object (evaluating this.props.navigation)

Answer 1

由于您的 ListScreen 是功能组件，this.props 不存在。

将您的 ListScreen 声明更改为：

const ListScreen = props => {...}

并像这样访问您的导航对象：

props.navigation.navigate(AboutScreen);

React Native 中的堆栈导航器。错误 "undefined is not an object (evaluating this.props.navigation)"

Stack Navigator in React Native. Error "undefined is not an object (evaluating this.props.navigation)"

javascript

undefined

react-native

react-navigation

stack-navigator