Question

当前行为

我有一个本机应用程序，该应用程序使用react-navigation v5进行路由。

我的所有视图中都有一个抽屉（左侧的offeset菜单）
我使用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内，因此无法调用该钩子

预期行为

我希望在<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，您将不必担心反应树。

Answer 2

如果您在导航器的屏幕上，则不必使用useNavigation。

导航器的结构如下。

stackNavigator
- drawerNavigator
  - drawerScreens
stackScreens

屏幕移动如下。

示例

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('moveScreenName')}
        title="Go to moveScreenName"
      />
    </View>
  );
}

useNavigation是一个钩子，可以访问navigation对象。当您无法将navigation道具直接传递到组件中，或者如果孩子的嵌套很深，则不想传递它，这将非常有用。

useNavigation()返回其内部屏幕的导航道具。

示例

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

Answer 3

您可以在这里观看此视频-https://youtu.be/hLP1G29bbLU

您可以看到的用法视频中的useNavigation hook。

Answer 4

我也在使用React Navigation 5x，我遵循了本指南，并且仍然使用第一种方法（对于旧的RNavigation）仍然成功。详细信息：模拟useNavigation函数

jest.mock(‘react-navigation-hooks’, () => ({
 useNavigation: () => jest.fn(),
 useNavigationParam: jest.fn(jest.requireActual(
  'react-navigation-hooks'
 ).useNavigationParam),
}));

如何在@ react-navigation抽屉中使用useNavigation（）？

4 个答案: