Как использовать navigation.navigate из компонента вне стека. Navigation

Question

У меня есть приложение, использующее React native, где я использую реагирующую навигацию (5.2.9).

Я создал Stack.Navigator, где у меня есть экраны, но я хочу, чтобы компонент Footer был снаружи, чтобы он отображался на всех экранах. Проблема в том, что я не могу перейти от нижнего колонтитула, что мне нужно сделать, так как в нижнем колонтитуле есть несколько кнопок, которые должны изменить экран:

const Stack = createStackNavigator();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer />
      </NavigationContainer>
    </Provider>
  );
};

Как мне пройти навигационную опору в нижний колонтитул?

Answer 1

Попробуйте:

Создайте новый файл с именем: RootNavigation. js

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

// file where you have the navigation

import {navigationRef} from './path/to/RootNavigation';

      <NavigationContainer ref={navigationRef}>
      .....
        <Footer />
      </NavigationContainer>

И нижний колонтитул. js должен выглядеть примерно так:

// Footer.js

import React from 'react';
import {View, Button} from 'react-native';
import * as RootNavigation from './path/to/RootNavigation';

const Footer= () => {
  return (
    <View>
      <Button
        title={'Go to'}
        onPress={() =>
          RootNavigation.navigate('screenName ', {userName: 'Lucy'})
        }
      />
    </View>
  );
};

export default Footer;

Для получения дополнительной информации вы можете прочитать документацию. https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

Компоненты вне компонентов Stack.Screen не получают навигационную опору. Так что в этом случае вы должны получить NavigationContainer, используя ссылки в компоненте нижнего колонтитула, следующим образом:

1. Создайте ссылку с помощью const myRef = React.createRef()
2. и передайте ее <NavigationContainer ref={myRef}> и
3. используйте эту ссылку для навигации, myRef.current?.navigate(name, params).

Это все объяснено здесь . Документы здесь отделяют создание ссылки в новом файле, чтобы позволить вам импортировать ссылку без циклов / проблем зависимости. В качестве документа вы можете теперь вызывать RootNavigation.navigate('ChatScreen', { userName: 'Lucy' }); в любом модуле js, а не только в компоненте реакции.

В вашем случае, однако, вам не нужно указывать ссылку в отдельном файле.

const Stack = createStackNavigator();
const navigationRef = React.createRef();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer ref={navigationRef}>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer navigationRef={navigationRef}/>
      </NavigationContainer>
    </Provider>
  );
};

А в <Footer/> использовать navigationRef.current?.navigate(name, params)

Answer 3

Из документации. https://reactnavigation.org/docs/connecting-navigation-prop/

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

Answer 4

В итоге я создал компонент с именем screen, который будет просто оборачивать содержимое экрана и отображать верхний / нижний колонтитул на основе реквизита:

import React from 'react';
import { View } from 'native-base';
import style from './style';
import Footer from '../../footer';
import Header from '../../header';

const Screen = ({
    footer,
    header,
    children,
    navigation
}) => (
  <View style={style.screen}>
    { header && <Header navigation={navigation} />}
    { children }
    { footer && <Footer navigation={navigation} />}
  </View>
);

export default Screen;

И оборачивать экраны моих приложений следующим образом:

<Screen header footer navigation={navigation}>
    ... screen content
</Screen>

Я чувствую, что это лучший способ, если я не могу решить эту проблему.