如何通过一种方法通过导航?

时间:2018-10-09 18:30:33

标签: react-native react-native-android react-navigation

我是反应导航的新手,我想通过“导航”作为道具,以便可以使用它。因为当我尝试在其他compo中使用它时,它抛出一条错误消息,提示“未定义this.props.navigation等。”

这就是我想做的

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

如您所见,我正在通过道具将导航传递给名为“ ChatBox”的组合。但是问题是我的“ ChatBox”组合没有收到导航。有人可以帮我吗?谢谢

1 个答案:

答案 0 :(得分:0)

我认为您错过了一些概念。

  1. 堆栈导航器类中提到的每个组件都会在其范围内获得一个导航对象。您可以使用this.props.navigation()
  2. 进行访问
  3. 如果您需要将导航对象传递到堆栈导航器类中未提及的任何其他屏幕,则需要将其作为道具提供,例如<Chatbox navigation={this.props.navigation} />

对于您来说,导航对象已正确发送,只是您在Chatbox组件中错误地获取了它。作为道具的导航封装在导航对象本身中(即,它存在于this.props.navigation.state.params.navigation中),并且由于您没有在堆栈导航器类中提及Chatbox组件,因此无法引用导航对象,因为它当前不在范围内。

所以

  1. 您可以通过渲染<Chatbox/>组件来替换组件,并为其提供道具(如以上第2点所述),而不是导航至该组件。
  2. 如果需要导航到组件,则需要在堆栈导航器类中定义Chatbox屏幕,然​​后才能使用导航对象。