React Native中的Stack Navigator。错误“未定义不是对象（正在评估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

运行代码，每当我按下按钮时，都会得到未定义的错误，它不是对象（评估this.props.navigation）

Answer 1

由于ListScreen是功能组件，因此您无权访问this.props

将ListScreen声明更改为：

const ListScreen = props => {...}

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

props.navigation.navigate(AboutScreen);