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

Question

我要做什么

我在 react native 中使用 tabNavigator 来创建一个用户可以滚动浏览帖子的应用程序。我正在尝试为帖子上的 cmets 添加第二个选项卡，以便用户可以按下帖子，并被定向到他们可以看到 cmets 的第二个选项卡。

我的问题

我设置了一些代码，这样当用户在第一个选项卡上的帖子上按下按钮时，我会将它们导航到第二个选项卡，并将该​​帖子的键传递到第二个选项卡：

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>

这基本上是说，“如果定义了params，则输出params.postKey”。

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