如何仅使用导航参考来推送屏幕

Question

使用react-navigation库，当您位于堆栈导航器一部分的屏幕上时，您可以使用props.navigation.push(route name, params)。我想实现同样的目标，能够推送一个新屏幕，但是从我获取 NavigationContainer 引用的根级别开始。

所以我有这个代码

   <NavigationContainer ref={navigationRef}>
       ... 
   </NavigationContainer>

我想做一些类似的事情

   navigationRef.push(routeName, params);

不幸的是，我这里没有push方法。有解决方法吗？

Answer 1

您可以设置RootNavigation.js这样的文件：

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

export const navigationRef = React.createRef();

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

然后你可以像这样使用它：

import {navigationRef} from './path/to/RootNavigation';

<NavigationContainer ref={navigationRef}>
  {/* content */}
</NavigationContainer>

和这个：

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

RootNavigation.push('Screen', { data: '...' })

来源：https ://reactnavigation.org/docs/navigating-without-navigation-prop/ 。