Question

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

2020-09-30

2842

react-native react-navigation

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

所以我有这个代码

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

我想做类似的事情

   navigationRef.push(routeName, params);

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

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/ 。