Как рендерить разные страницы React Native?

В React Native рендеринг различных страниц осуществляется с использованием навигации, которая позволяет переходить между разными экранами приложения. Существует несколько подходов, которые можно использовать для реализации навигации в React Native.

Один из наиболее популярных вариантов навигации - это использование библиотеки React Navigation. React Navigation предоставляет широкие возможности для создания навигации в приложении. Для начала, необходимо установить React Navigation, выполнив следующую команду в терминале:

npm install @react-navigation/native

После установки библиотеки необходимо настроить основные компоненты, такие как NavigationContainer и StackNavigator. NavigationContainer обертывает всё приложение и предоставляет контекст для навигации. StackNavigator предоставляет возможность создавать стековую навигацию, где каждый экран помещается на вершину стека и можно переходить между ними.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Импортируем созданные экраны
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Details" component={DetailsScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

В данном примере созданы два экрана: HomeScreen и DetailsScreen. Для того, чтобы осуществлять навигацию между экранами, необходимо использовать навигационную пропсу navigation. Например:

import React from 'react';
import { Button, View } from 'react-native';

function HomeScreen({ navigation }) {
    return (
        <View>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

export default HomeScreen;

На экране HomeScreen добавлен компонент Button, который при нажатии вызывает функцию navigation.navigate и перенаправляет на страницу Details.

Аналогичным образом можно описать страницу DetailsScreen. Весь процесс осуществления навигации будет автоматически управляться React Navigation.

В дополнение к стековой навигации, в React Navigation также доступны другие типы навигации, такие как таб-навигация, боковое меню и др. Выбор конкретного типа навигации зависит от требований вашего приложения.

Надеюсь, эта информация поможет вам разобраться с рендерингом разных страниц в React Native!