在没有道具的情况下访问React-Native导航

Question

我做了一个小帮手组件

 const NavHelper = ({ navigation, dest }) => {
  return (
    <TouchableOpacity onPress={() => navigation.navigate(`${dest}`)}>
      <Text>Go to {dest}</Text>
    </TouchableOpacity>
  );
};

通过发送导航作为道具来工作。

<NavHelper navigation={navigation} dest="List" />

但是由于该组件将始终使用导航，所以如果我可以访问导航而不必将其作为道具发送以避免重复，那将是很好的选择。

https://reactnavigation.org/docs/connecting-navigation-prop/

在首页上，您可以使用来做到这一点

import { useNavigation } from '@react-navigation/native';

const NavHelper = ({ dest }) => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity onPress={() => navigation.navigate(`${dest}`)}>
      <Text>Go to {dest} Demo</Text>
    </TouchableOpacity>
  );
};
但是当我在组件中尝试这种方法时，仿真器说它找不到导航器对象。我想念什么？

我做了一个小助手组件const NavHelper =（{navigation，dest}）=> {return（navigation.navigate（`$ {dest}`）}}> 转到{...

Answer 1

简单的解决方案，结果是反应导航有多种版本，而我在使用4.x时正在查看5.x的文档。