javascript - 需要在 react 导航中设置默认 Prop

Question

我正在尝试做什么

我正在 React Native 中使用 tabNavigator 创建一个应用程序，用户可以在其中滚动浏览帖子。我正在尝试为帖子评论添加第二个选项卡，以便用户可以按帖子，然后定向到第二个选项卡，在那里他们可以看到评论。

我的问题

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

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

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

接收数据:

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

稍后渲染它:

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

所有这些都按预期工作，除了我第一次打开应用程序时收到错误。如果我关闭错误，然后按预期使用该应用程序，该 key 就会显示。错误:

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

我知道我需要将默认值设置为某些内容，但我不知道该怎么做。我希望得到一些帮助，为其提供默认定义。

Answer 1

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

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

到

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

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

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