Question

我是反应导航的新手，我正在尝试实现一个简单的导航。我遇到的问题是我找不到将“导航”对象传递到所需屏幕的方法。我尝试使用withNavigation等。它仍然抛出“ this.props.navigation”未定义！根据我在rootStack中声明屏幕的内容，导航对象会自动传递给组件吗？

所以这是我的rootStack

/* ROUTING RULES */
const RootStack = createStackNavigator(
    {
      Main: Main,
      ChatBox: ChatBox,
    },
    {
      initialRouteName: 'Main',
      
     }
    

   
  );
/* End */

这是我用来导航聊天框屏幕的方法

()=>this.props.navigation.navigate('ChatBox', {
                avatarUrl: matches.avatarUrl,
                name: matches.name,
              })

我注意到从主屏幕上，我可以毫无问题地访问导航，但是当我尝试在chatBox屏幕上执行一个简单的console.log时

  constructor(props){
   super()
  console.log(this.props.navigation)
  
  }

我得到“ TypeError：未定义不是对象（正在评估'_this.props.navigation'）”

有人可以帮助我解决这个难题吗？谢谢：）

Answer 1

在您的构造函数中，您不需要此即可访问道具。试试这个

constructor(props){
    super(props);
    console.log(props.navigation.getParam('avatarUrl');
}

编辑：您也必须将道具传递给超级！不发送它可能会引起一些错误。

Answer 2

尝试使用生命周期方法代替构造方法

componentDidMount() {
    console.log(this.props.navigation)
}

如何在react-native

2 个答案: