Как реализовать навигацию по нижней вкладке с помощью React Native

Навигация — важная часть разработки мобильных приложений. Доступны различные типы навигации для облегчения навигации пользователей. Навигация по нижней вкладке — одна из самых заметных навигаций, в Instagram есть навигация по нижней вкладке, и это действительно круто. Возьмите чашку кофе и начните программировать, так как мы собираемся создать навигацию по нижней вкладке, как в Instagram. Поскольку это кроссплатформенная программа, она будет работать как на устройствах с iOS, так и на Android.

Если вы ищете видеоурок, то он здесь:

Настройка React Native Expo

1. Создайте папку

2. Откройте терминал/командную строку

3. Напишите команду: expo init BottomNavigation

4. выберите пустой шаблон

5. Убедитесь, что у вас хорошее подключение к Интернету. Пусть выставка установит все зависимости JavaScript. После завершения загрузки. Перейдите в папку «BottomNavigation».

Вы увидите что-то вроде этого.

Установите зависимости для навигации по нижней вкладке

React Native имеет отличный навигационный пакет. Это бесплатно и с открытым исходным кодом. Давайте установим пакеты в тот же каталог. напишите команду ниже.

1. npm install @react-navigation/native

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

3. npm install @react-navigation/material-bottom-tabs

Вы увидите что-то вроде этого:

Теперь откройте папку «BottomNavigation» в вашем любимом редакторе кода. Мой личный фаворит — VS Code. Теперь проверьте установку всех зависимостей. Проверьте файл package.json и проверьте его.

Откройте App.js и напишите приведенный ниже код.

import React, { Component } from 'react'
import HomeScreen from './Screens/Home';
import NotificationScreen from './Screens/Notification';
import ProfileScreen from './Screens/Profile';
import SearchScreen from './Screens/Search';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import  MaterialCommunityIcons  from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createMaterialBottomTabNavigator();

Мы хотим, чтобы наша вкладка «Навигация» выглядела как Instagram. Итак, нам нужно четыре экрана. Теперь создайте папку в том же каталоге и назовите ее «Экраны». В папке Screens создайте четыре файла JavaScript: Home.js, Profile.js, Notification.js, Search.js. сильный>. Импортируйте эти четыре файла в App.js, как показано выше.

Откройте файл Home.js и напишите приведенный ниже код.

import React from 'react'
import { View, Text } from 'react-native'
function Home() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Home Screen</Text>
</View>
)
}
export default Home

Скопируйте и вставьте тот же код в файл Notification.js, Profile.js, Search.js и измените имя функции на Notification, Profile, Search соответственно. Кроме того, измените часть экспорта по умолчанию. После этого измените текст «Главный экран» между тегом <Text> во всех других файлах JavaScript. После всего этого вернемся к App.js и напишем следующий код.

export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Notification" component={NotificationScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

И мы закончили.

Вернитесь к терминалу и запустите скрипт npm start.

Откройте приложение Expo и отсканируйте QR-код. Что-то подобное появится на экране вашего мобильного телефона.

Сделаем его более динамичным. Обновите код в App.js. Мы обновим текст с помощью Icon. Установите для этого еще одну зависимость: npm install react-native-vector-icons

Импортируйте это в App.js и обновите код.

import  MaterialCommunityIcons  from 
'react-native-vector-icons/MaterialCommunityIcons';
export default function App() {
  return (
    <NavigationContainer>
    <Tab.Navigator labeled={false} barStyle={{ backgroundColor: 'black' }} 
activeColor="white" >
      <Tab.Screen name="Home" component={HomeScreen}            //Home Screen
      options={{
        tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={26}/>
        ),
    }}/>
      <Tab.Screen name="Search" component={SearchScreen}      // Search Screen
      options={{
        tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="magnify" color={color} size={26}/>
        ),
    }}/>
      <Tab.Screen name="Notification" component={NotificationScreen} 
 // Notification Screen
      options={{
        tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="heart" color={color} size={26}/>
        ),
    }}/>
      <Tab.Screen name="Profile" component={ProfileScreen}   // Profile Screen
      options={{
        tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account-circle" color={color} 
size={26}/>
        ),
    }}/>
    </Tab.Navigator>
    </NavigationContainer>
  );
}

И вот мы начнем.
Мы почти достигли нижней вкладки, похожей на Instagram.

Мы закончили этот проект здесь, так как это простой код JavaScript, и мы использовали несколько фреймворков JavaScript. Ознакомьтесь с полным кодом Github здесь.

Спасибо.

Здравствуйте, меня зовут Рохит Кумар Тхакур. Я открыт для фриланса. Я создаю нативные проекты для реагирования и в настоящее время работаю над Python Django. Свяжитесь со мной ([email protected])