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

Question

我想做的

我正在使用React Antial中的TabNavigator来创建一个应用程序，用户可以在其中滚动帖子。我正在尝试在帖子上添加第二个选项卡以进行评论，以便用户可以按帖子，并将其定向到第二个选项卡，在那里他们可以看到评论。

我的问题

我设置了一些代码，因此当用户按下第一个选项卡上的帖子上的一个按钮时，我将它们导航到第二个选项卡，然后将帖子的键传递到第二个选项卡：

：

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>

to

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

这基本上说："如果定义了params，则输出params.postKey"。

但老实说，这听起来好像您正在使用错误的UX组件。移动应用程序选项卡通常用于不同的独立类别，通常不依赖彼此。如果我正确理解您，那么该作业的正确工具将是StackNavigator。当您介绍项目列表（您的情况下的帖子）时，通常会使用它，然后要导航到有关该列表项目的更多详细信息（在您的情况下）。您可以将stacknavigator嵌套在"帖子"选项卡中。