Как реализовать навигацию по нижней вкладке с помощью 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])