Как создать навигацию Screen и BottomTabs в связке?

Для создания навигации между экранами и использования Bottom Tabs в React Native, можно использовать библиотеку React Navigation. React Navigation предлагает решения для различных типов навигации, включая Stack, Tab и Drawer навигацию. В данном случае мы будем использовать Stack и Bottom Tab навигацию.

Шаг 1: Установка React Navigation

Перед началом работы убедитесь, что у вас установлен Node.js и npm. Затем можно установить React Navigation с помощью следующей команды в терминале:

npm install @react-navigation/native

Затем выполните команду:

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Для Android также нужно выполнить следующие команды:

npx pod-install ios

Шаг 2: Установка зависимостей

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

npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs

Шаг 3: Настройка навигации

Во-первых, создаем компоненты для каждого из наших экранов. Например, у нас есть "HomeScreen.js" и "ProfileScreen.js":

HomeScreen.js

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

export function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

ProfileScreen.js

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

export function ProfileScreen() {
  return (
    <View>
      <Text>Profile Screen</Text>
    </View>
  );
}

Затем создаем главный файл навигации "App.js" и настраиваем навигацию:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from './HomeScreen';
import { ProfileScreen } from './ProfileScreen';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function ProfileStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Profile" component={ProfileStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Шаг 4: Запуск приложения

Теперь можно запустить приложение и увидеть результат. Навигация должна быть настроена, и вы должны видеть две вкладки с названиями "Home" и "Profile". При нажатии на каждую из них будет открываться соответствующий экран.

В заключение, использование React Navigation в связке с React Native позволяет создать удобную навигацию между экранами и использовать Bottom Tabs для быстрого доступа к различным частям вашего приложения. Это включает в себя настройку навигационных стеков для каждого экрана и использование Tab навигации для отображения Bottom Tabs.