在React Native导航6中将参数传递给底部选项卡组件

Question

我有如下代码：

   const Project = ({ navigation, route }) => {
      const id = route.params.itemId;
        return (
        <Stack.Navigator >
          <Stack.Screen
            name="ProjectMain"
            component={TopNav}
            initialParams={{ id: id }}
          />
        </Stack.Navigator>
      );
    };

现在如何将initialParams传递给我的组件TopNav？

我的TopNav如下所示

const TopNav = (props) => {
  console.log(props);
  console.log(props.route);

   return (
    <>
     //my tab screens
    </>
  );
};

我无法在这里获取参数，它总是未定义的。如何将某些内容传递到我的 TopNav 组件？

Answer 1

这对我来说看起来是正确的。

您能否仔细检查 id（项目中的第 2 行）是否未定义？

props.route 的输出是什么？它应该是一个带有

key

、

name

、

params

和

path

的对象

你可以尝试使用：

const TopNav = () => {
  const route = useRoute()
  console.log(route);

   return (
    <>
     //my tab screens
    </>
  );
};

Answer 2

使用 选项。

<Stack.Screen
   name="ProjectMain"
   component={TopNav}
   options={{
      id: 'Awesome app',
    }}
/>