Как использовать useNavigation () в ящике @ реакции-навигации?

Question

Текущее поведение

У меня есть собственное реактивное приложение, которое использует react-navigation v5 для маршрутизации.

1. I у меня есть ящик (меню с ошибками слева) во всех моих представлениях
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 так что ловушку нельзя назвать

Ожидаемое поведение

Я ожидаю, что навигация будет доступна в моем <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
  • выдвижной ящик * Навигатор
    • выдвижной экран
• 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();
      }}
    />
  );
}