React native 如何在react navigation v5中使用withNavigation？

我有一个嵌套组件，我想在react navigation v5的嵌套组件中使用

with navigation

。

您应该使用useNavigation钩子来实现相同的功能

您可以参考这里的文档

---

为什么不使用导航创建自己的

从“React”导入React；
从“@react-navigation/native”导入{useNavigation}；//不确定包名
导出常量withNavigation=（组件：任意）=>{
返回（道具：任意）=>{
const navigation=useNavigation（）；
返回；
};
};

反应导航版本：5.x 有时，您需要在无法访问导航道具的位置触发导航操作，例如Redux中间件。对于这种情况，您可以从导航容器中分派导航操作

如果您正在寻找一种从组件内部导航的方法，而无需向下传递导航道具。当您可以访问导航道具或使用导航时，不要使用此方法，因为它的行为会有所不同，并且许多特定于屏幕的帮助器方法将不可用

您可以通过ref访问根导航对象，并将其传递给RootNavigation，稍后我们将使用它进行导航

//App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

//添加您需要的其他导航功能并将其导出 然后，在任何javascript模块中，只需导入从中导出的RootNavigation和call函数。您可以在React组件之外使用此方法，事实上，在React组件内部使用时，它也同样有效

//任何js模块

import * as RootNavigation from './path/to/RootNavigation.js';

//

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

Apart from navigate, you can add other navigation actions:

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

export function push(...args) {
  navigationRef.current?.dispatch(StackActions.push(...args));
}

---

您可以通过安装和导入@react navigation/compat来使用withNavigation，以下是供参考的链接

谢谢。虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效-

import * as RootNavigation from './path/to/RootNavigation.js';

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

Apart from navigate, you can add other navigation actions:

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

export function push(...args) {
  navigationRef.current?.dispatch(StackActions.push(...args));
}