react-native 如何在两个屏幕之间传递参数？

Question

请不要急于关闭这个问题作为重复。 我在这里阅读了官方文档，因此我已经成功地在屏幕之间传递了参数。 我目前的案例存在一些问题，解决方案对我来说并不明显。

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

我能够在两个屏幕之间成功导航，但是，由于某种原因，当我从“Feed”导航到“Comments”时，我无法传递任何参数。

我按“评论”图标的“提要”屏幕的一部分：

      <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选项卡上的位置，我想从那里导航到Comments屏幕。

我仍然没有看到问题出在哪里？

Answer 1

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

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 ://reactnavigation.org/docs/5.x/nesting-navigators#passing-params-to-a-screen-in-a-nested-navigator

所以在我的情况下：

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