如何在react-navigation v5中使用with导航?

30byixjq  于 2022-12-04  发布在  React
关注(0)|答案(2)|浏览(145)

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

h5qlskok

h5qlskok1#

为什么不使用Navigation * 创建自己*

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} />;
  };
};
wnrlj8wa

wnrlj8wa2#

React导航版本:5.x有时候你需要在你无法访问导航属性的地方触发一个导航动作,比如Redux中间件。对于这种情况,你可以从导航容器中调度导航动作。
如果您正在寻找一种从组件内部导航而无需向下传递导航属性的方法。当您可以访问导航属性或useNavigation时,请不要使用此方法,因为它的行为会有所不同,并且许多特定于屏幕的帮助器方法将不可用。
您可以通过ref访问根导航对象,并将其传递给RootNavigation,稍后我们将使用它进行导航。
//应用程序. js

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

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

在下一步中,我们定义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组件外部使用此方法,实际上,在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/

相关问题