React Native - 在 AppNavigator 之外访问抽屉导航

Question

  App.js 
    <Store>
      <Navbar />
      <AppNavigator ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }} />
    </Store>

我希望能够访问

 props.navigation.openDrawer();

来自导航栏，但我得到

undefined is not an object (evaluating 'props.navigation.openDrawer')

onPress
    Navbar.js:70:29
    etc..

如何让 NavBar 访问抽屉？

Answer 1

我想您正在关注 Navigating without the navigation prop（如果您没有关注，那么您应该关注您的情况）。然后在NavigationService.js中添加openDrawer方法

// NavigationService.js

import { DrawerActions } from 'react-navigation-drawer';

...

// add this function
function openDrawer(routeName, params) {
  _navigator.dispatch(DrawerActions.openDrawer());
}


export default {
  ...
  // and export it
  openDrawer
};

然后使用

而不是 props.navigation.openDrawer()

NavigationService.openDrawer()

别忘了分别导入

Answer 2

这是我在没有导航道具的情况下使用 openDrawer 的方式：

在您的 App.js（或其他路由器）中

1/

import { DrawerActions } from '@react-navigation/native';

2/

export const navigationRef = React.createRef();

3/

export function openDrawer(routeName, params) {
  navigationRef.current.dispatch(DrawerActions.openDrawer());
}

4/ 在你的导航容器中添加这个 ref

<NavigationContainer ref={navigationRef}>

5/ 在创建 openDrawer 的地方调用你的函数：

<TouchableOpacity onPress={() => openDrawer()}>
        <Image
          source={tab}
          style={{
            width: 20,
            height: 20,
          }}
        />
</TouchableOpacity>

React Native - 在 AppNavigator 之外访问抽屉导航

React Native - Accessing drawer navigation outside of AppNavigator

javascript

navigation-drawer

react-native

react-navigation

react-native-drawer