如何在React天然中的两个屏幕之间传递参数？

Question

请，不要急于将这个问题重复结束。我已经阅读了官方文档在这里，所以我设法在屏幕之间成功传递了参数。我目前的案件存在问题，解决方案对我来说并不明显。

我有两个屏幕。第一个称为“ feed”，它属于底部标签导航器。从“ feed”屏幕中，我希望能够导航到堆栈导航器的一部分的“注释”屏幕。

但是，由于某种原因，当我从“ feed”到“注释”时，我无法在两个屏幕之间成功导航。

我按“ feed”屏幕的一部分，我按“注释”图标：

      <TouchableOpacity
          onPress={() => {
            console.log("passing param id: ", id);
            navigation.navigate("Comments", { id: id });
          }}
        >
          <FontAwesome name="comment-o" size={30} color="#0047AB" />
        </TouchableOpacity>

我在控制台上看到的内容：

passing param id: some_id_whic_does_not_matter

我设法成功导航到“注释”屏幕。我的“评论”屏幕的一部分：

const CommentsScreen = (props) => {
  console.log("Comments Screen: ");
  console.log("comments: ", props);

我在路由对象的控制台上看到了什么：

route": Object {
    "key": "Comments-some-key",
    "name": "Comments",
    "params": undefined,
  }

您能告诉我我做错了什么吗？

我目前位于networkNavigator选项卡上的位置，然后从那里导航到注释屏幕。

我仍然看不到问题在哪里？

Answer 1

我认为我们通过路由访问参数我的意思是

const CommentsScreen =({route})=>{
    const {id} = route.params;
    console.log(id);
...}

Answer 2

访问传递的参数，

const CommentsScreen = (props) => {
  console.log("Comments Screen: ");
  console.log("comments: ", props.route.params.id);

您可以通过以下 props.route.params

其中包含您传递的对象，

navigation.navigation('screenname', {
...this object...
});

可以使用相同的键提取数据。

示例

navigation.navigation('screenname', {
  id: '1',
  name: 'Adam',
  age: 12
});

//Then you can access via 

  console.log("id: ", props.route.params.id);
  console.log("name: ", props.route.params.name);
  console.log("age: ", props.route.params.age);

Answer 3

我在这里找到了我问题的答案： https://reaectnavigation.org/docs/5.x/nesting-navigators#passing-params-params-to-a-a-screen-in-a-a-nested-navigator

在我的案例中：

navigation.navigate("Root Navigator", {
              screen: "Comments",
              params: { id: id },
            });