Начало работы с React Navigation - UPROGER

Если вы работаете над приложением React Native для iOS или Android и хотите настроить маршрутизацию / навигацию на своих страницах, вы можете использовать React Navigation с библиотекой React Native для настройки навигации.

Библиотека React Navigation поддерживает навигацию по стеку, навигацию по вкладкам и навигацию по ящикам.

Начало

Ниже приведены шаги для библиотеки React Navigation версии 5.

Установите React Navigation Library в корневую папку, запустите команду, приведенную ниже, в своем терминале:
npm install @react-navigation/native@⁵.x

Установите зависимости, необходимые для React Navigation. Запустите команду, приведенную ниже, в своем терминале:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Теперь для связывания перейдите в Project/ios папку и выполните команду, приведенную ниже:
pod install or npx pod-install ios

Теперь нам нужно перенести все приложение в NavigationContainer

For NavigationContainer Run below command for the install dependency
Before importing File follow below steps:
1. Do npm install @react-navigation/native 
2. go to cd ios/ folder 
3. Run pod install command.

import { NavigationContainer} from '@react-navigation/native';
Then write in your render method below code:
return (
    <NavigationContainer>
        <StackNavigator/> {/* Stack Navigation its use for our application stack defined component. */}
    </NavigationContainer>
);

Теперь мы напишем наш первый компонент навигации по стеку. Сначала мы создадим отдельный файл для навигации по стеку, имя нашего файла Stack.Navigator.jsfile

Before creating File follow below steps:
1. Do npm install @react-navigation/stack 
2. go to cd ios/ folder 
3. Run pod install command.
/**
* Example of Stack Navigator Component 
*/
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({ navigation }) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text> Home Screen </Text>
            <TouchableOpacity onPress={() => {
                navigation.navigate('Settings')
            }}><Text style={{color: 'blue'}}>Go to Settings Screen </Text></TouchableOpacity>
        </View>
    )
}

function SettingScreen({ navigation }) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text> Setting Screen </Text>
            <TouchableOpacity onPress={() => {
                navigation.navigate('Home')
            }}><Text style={{color: 'blue'}}>Go to Home Screen </Text></TouchableOpacity>
        </View>
    )
}

function StackNavigator() {
    const Stack = createStackNavigator();
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen}/>
            <Stack.Screen name="Settings" component={SettingScreen}/>
        </Stack.Navigator>
    );
}

export default StackNavigator;

Итак, в приведенном выше примере мы перемещаемся, используя метод ниже navigation.navigate(screenName)

Пример навигации по стеку