如何从操作文件进行导航调用

Question

在我的react-native应用程序中使用react-navigation v5和redux时，如何从actions文件触发导航？有没有更好的方法来做到这一点？当结果满足时，我想触发导航到下一个屏幕，但我无法使用 useNavigation()。谢谢。

Answer 1

创建对 NavigationContainer 的引用

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

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);
}

现在使用以下命令从任何地方触发导航：

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

//...

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

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