В React Native навигация по нижним вкладкам — это популярный шаблон пользовательского интерфейса, который позволяет пользователям перемещаться между различными экранами, нажимая на вкладки, расположенные в нижней части экрана. Хотя обычно в качестве основной навигации для приложения используется навигатор нижней вкладки, могут быть случаи, когда вам нужно добавить навигатор нижней вкладки на экран, который не является частью основной структуры навигации. В этой статье мы рассмотрим несколько способов достижения этого требования, а также приведем примеры кода.

Метод 1: использование вкладок навигации React
React Navigation — это широко используемая библиотека навигации в экосистеме React Native. Мы можем использовать функцию createBottomTabNavigator из пакета @react-navigation/bottom-tabs для создания автономного навигатора нижней вкладки на экране.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyScreenWithBottomTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
    </Tab.Navigator>
  );
}

Метод 2: настраиваемый компонент нижней панели вкладок.
Другой подход заключается в создании настраиваемого компонента нижней панели вкладок и ручном управлении переходами экрана внутри компонента. Этот метод обеспечивает большую гибкость в настройке.

import React, { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
function MyCustomBottomTabBar({ activeTab, onChangeTab }) {
  const tabs = [
    { name: 'Screen1', label: 'Screen 1' },
    { name: 'Screen2', label: 'Screen 2' },
  ];
  return (
    <View style={{ flexDirection: 'row' }}>
      {tabs.map((tab) => (
        <TouchableOpacity
          key={tab.name}
          onPress={() => onChangeTab(tab.name)}
          style={{
            flex: 1,
            alignItems: 'center',
            paddingVertical: 10,
            backgroundColor: activeTab === tab.name ? '#f0f0f0' : 'transparent',
          }}
        >
          <Text>{tab.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}
function MyScreenWithCustomBottomTabBar() {
  const [activeTab, setActiveTab] = useState('Screen1');
  const changeTab = (tabName) => {
    setActiveTab(tabName);
    // Perform screen transition logic here
  };
  return (
    <View>
      {/* Render your screen content */}
      <MyCustomBottomTabBar activeTab={activeTab} onChangeTab={changeTab} />
    </View>
  );
}

Метод 3: использование сторонней библиотеки
Существует несколько сторонних библиотек, которые предоставляют готовые к использованию компоненты навигации по нижней вкладке. Одной из популярных библиотек является «react-native-navigation-bar», которая предлагает настраиваемые нижние панели вкладок.

Установите библиотеку с помощью npm или Yarn:

npm install react-native-navigation-bar

import React from 'react';
import { View, Text } from 'react-native';
import NavigationBar from 'react-native-navigation-bar';
function MyScreenWithThirdPartyBottomTabBar() {
  return (
    <View>
      {/* Render your screen content */}
      <NavigationBar
        tabs={[
          { title: 'Screen1', icon: require('./screen1.png') },
          { title: 'Screen2', icon: require('./screen2.png') },
        ]}
        initialTabIndex={0}
        onTabPress={(index) => {
          // Perform screen transition logic here
        }}
      />
    </View>
  );
}

Добавить навигатор нижней вкладки на экран в React Native, который не является частью основной навигации, можно добиться различными методами. Используя «createBottomTabNavigator» React Navigation, создавая собственный компонент нижней панели вкладок или используя сторонние библиотеки, вы можете реализовать этот шаблон пользовательского интерфейса гибким и эффективным способом. Выберите метод, который лучше всего соответствует требованиям вашего проекта и повышает удобство использования.