需要在反应导航中设置默认道具

Question

我想做什么

我在 React Native 中使用 tabNavigator 创建一个应用程序，用户可以在其中滚动 posts。我正在尝试为 post 上的评论添加第二个选项卡，这样用户可以按 post，然后被定向到他们可以看到评论的第二个选项卡。

我的问题

我设置了一些代码，以便当用户按下第一个选项卡上 post 上的按钮时，我将他们导航到第二个选项卡，并传递 [=36= 的键] 到第二个选项卡：

onPress={() => { this.props.navigation.navigate('CommentScreen',{postKey: item.key}) }}

然后在我的第二个选项卡上，应用程序获取此信息并将其显示在文本组件中：

接收数据：

render() {
const { params } = this.props.navigation.state;
  return (

比稍后渲染它：

<Text>
  {params.postKey}
</Text>

除我第一次打开应用程序时出现错误外，所有这些都按预期工作。如果我关闭错误然后按预期使用应用程序，密钥就会显示出来。错误：

undefined is not an object (evaluating 'params.postKey')

我知道我需要设置默认值，但我不知道如何设置。我希望得到一些帮助，给它一个默认定义。

Answer 1

您收到错误消息是因为尚未定义参数。因此，您只需更改

即可使错误消失

<Text>
  {params.postKey}
</Text>

到

<Text>
  {params && params.postKey}
</Text>

这基本上就是说，"if params is defined, then output params.postKey"。

但老实说，听起来您为此使用了错误的用户体验组件。移动应用程序选项卡通常用于不同的、独立的类别，并且通常不相互依赖。如果我对你的理解是正确的，那么完成这项工作的正确工具是 StackNavigator。这通常在您呈现项目列表（在您的案例中是帖子），然后想要导航到有关该列表项的更多详细信息（在您的案例中是评论）时使用。您可以将 StackNavigator 嵌套在 "Posts" 选项卡中。

需要在反应导航中设置默认道具

Need to set default prop in react navigation

javascript

android

react-native

react-navigation

我想做什么

我的问题