навигация вне навигатора не работает

Question

Я знакомлюсь с новой версией реакции-навигации. У меня проблема при использовании метода navigation.navigate.

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

Когда мы нажимаем кнопку меню, выдается ошибка - Устройство: (65:24) undefined не является объектом (оценка 'navigation.navigate') Ожидаемое поведение

При нажатии кнопки меню он должен открыть ящик Как воспроизвести

https://snack.expo.io/W0dye1bLt

Answer 1

Пока FooterComponent отображается внутри NavigationContainer, это не экран или внутри какого-либо навигатора, поэтому у него не будет доступного контекста навигации, и он не сможет получить опору навигации из useNavigation.

Однако есть обходной путь для этой конкретной проблемы, когда вы создаете ссылку для своего NavigationContainer и передаете эту ссылку в FooterComponent. Это подробно описано в разделе "Навигация без навигационной опоры" документации React Navigation. Применительно к вашей закуске потребуются следующие изменения (плюс соответствующий импорт):

const Navigator = () => {
  const navigationRef = useRef();

  return (
    {...}
      <NavigationContainer ref={navigationRef}>
        {...}
        <FooterComponent navigationRef={navigationRef} />

const FooterComponent = ({ navigationRef }) => {
  {...}
      <TouchableOpacity onPress={() => navigationRef.current.dispatch(DrawerActions.openDrawer())
      }>

Затем вы можете использовать тот же подход с navigationRef.current.navigate('Notifications') или navigationRef.current.navigate('Home') для других вкладок.

Вы можете увидеть, как это применимо к вашей закуске здесь: https://snack.expo.io/POeoVzAsG