javascript - 如何将 Navigation() 与@react-navigation抽屉一起使用？

Question

当前行为

我有一个使用 react-navigation 的react-native应用程序v5 用于路由。

1. 我的所有 View 中都有一个抽屉(左侧偏移菜单)
2. 我使用 stackNavigation 进行页面转换。

由于(1)，我的结构是 drawerNavigator (a) > stackNavigator (b) > views (c) .

当我尝试调用useNavigation()时钩在我的<DrawerContent /> ，我有以下错误:

Error: We couldn't find a navigation object. Is your component inside a navigator?
    at useNavigation (bundle.js:8766)

是的，我不在stackNavigator内所以钩子(Hook)无法被调用

预期行为

我希望在我的 <DrawerContent /> 中提供导航.

您的环境

| software                       | version |
| ------------------------------ | ------- |
| iOS or Android                 | iOS, Android and web
| @react-navigation/native       | 5.0.0-alpha.41
| @react-navigation/stack         | 5.0.0-alpha.63
| @react-navigation/drawer       | 5.0.0-alpha.41
| react-native-reanimated        | 1.4.0
| react-native-gesture-handler   | 1.5.3
| react-native-safe-area-context | 0.6.2
| react-native-screens           | 2.0.0-alpha.32
| react-native                   | https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz
| expo                           | SDK36
| node                           | v13.5.0
| npm or yarn                    | 6.13.7

如何使用 @react-navigation/stack 里面 @react-navigation/drawer 或者我应该如何用它们构建我的抽屉和应用程序？

Answer 1

这可以使用https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html来实现

创建RootNavigation:

import { createRef } from 'react';

export const navigationRef = createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

export function goBack() {
  navigationRef.current?.goBack();
}

在App.js中:

import { navigationRef } from './navigation/RootNavigation';
// ...
<NavigationContainer
  ref={navigationRef}
>
  {children}
</NavigationContainer>

然后从任何来源导入RootNavigation，您就不必担心 react 树。