Question

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

Answer 1

React 导航版本：5.x 有时您需要从无法访问导航道具的地方触发导航操作，例如 Redux 中间件。对于这种情况，您可以从导航容器调度导航操作。

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

您可以通过 ref 访问根导航对象，并将其传递给我们稍后将用于导航的 RootNavigation。

// App.js

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

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

在下一步中，我们定义 RootNavigation，这是一个简单的模块，具有调度用户定义的导航操作的功能。

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// 添加其他需要的导航功能并导出然后，在任何 javascript 模块中，只需导入 RootNavigation 并调用从中导出的函数。您可以在 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));
}

https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

为什么不创建自己的 withNavigation

import React from 'react';
import { useNavigation } from '@react-navigation/native'; // not sure package name

export const withNavigation = (Component: any) => {
  return (props: any) => {
    const navigation = useNavigation();

    return <Component navigation={navigation} {...props} />;
  };
};

Answer 3

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

您可以在此处参考文档 https://reactnavigation.org/docs/use-navigation/

如何在react-navigation v5中使用withNavigation？

3 个答案: