Пример React Native Drawer Navigator — ведущая тема сегодняшнего дня. React Native Navigation — это надежная библиотека, которая помогает нам создавать навигацию между разными экранами, навигацию по ящикам и навигацию по вкладкам в нашем React Native сильные> приложения. Мы также используем иониконы для отображения значков на экране. После этого примера вы можете создать ящик, который будет переключаться в зависимости от кнопки. Давайте начнем этот Пример React Native Drawer Navigator с установки React Native на Mac .
Пример React Native Drawer Navigator
Установите React Native с помощью React Native CLI . Если вы не установили React Native CLI, установите его глобально с помощью следующей команды.
# 1: Установить React Native.
Введите следующую команду, чтобы установить его глобально.
sudo npm install -g react-native-cli
Теперь, создайте проект React Native, используя следующую команду.
react-native init drawer
Перейдите в папку проекта.
cd drawer
Установите стороннюю библиотеку , используя следующую команду.
yarn add response-native-navigation react-native-vector-icons
Теперь свяжите эти зависимости или настройте его в нашем проекте с помощью следующей команды.
response-native link
Также нужно изменить одну вещь, если сделано неправильно.
В Xcode вам нужно будет отредактировать этот файл: AppD elegate.m .
Заменить весь его код этой ссылкой
Заменить @ "index.ios" с @ "index" , если вы используете index.js в качестве точки входа вместо index.ios.js и index.android.js (это значение по умолчанию, начиная с React Native 0.49).
# 2: Создайте HomeScreen для нашего приложения.
Внутри корневой папки создайте одну папку с именем screen. Внутри этой папки создайте один файл с именем HomeScreen.js. Напишите внутри него следующий код.
//HomeScreen.jsimport React, {Component} из 'react'; import {View, Text, Button} из 'react-native'; класс экспорта по умолчанию HomeScreen расширяет Component {onButtonPress = () => {console.log ('Button Pressed !!')} render () {return ( Home Screen ); }}
Хорошо, теперь внутри файла App.js напишите следующий код. Нам нужно зарегистрировать компонент навигации.
//App.jsimport {Navigation} из response-native-navigation '; импортировать HomeScreen из' ./screens/HomeScreen';Navigation.registerComponent (' drawer.HomeScreen ', () => HomeScreen); Navigation.startSingleScreenApp ({screen: {screen:' drawer.HomeScreen ', title:' Home '}});
# 3: Создайте файл index.ios.js внутри корня.
У нас уже есть один файл с проектом под названием index.js , но мы не будем его использовать. Вместо этого мы создаем iOS специально, поэтому ее имя
Напишите следующую строку кода внутри индекса . .ios.js файл.
//index.ios.jsimport приложение из './App';
# 4 : Создайте еще один экран.
Внутри папки Screens создайте один файл с именем AnalyticsScreen.js и добавьте следующий код внутри него.
//AnalyticsScreen.jsimport React, {Component} из 'react'; импорт {View, Text} из 'react-native'; экспорт класса по умолчанию AnalyticsScreen расширяет Component { render () {return ( Your AnalyticsScreen )}}
Теперь зарегистрируйте этот экран в App.js файл.
//App.jsimport {Navigation} из 'react-native-navigation'; импортировать HomeScreen из './screens/HomeScreen'; импортировать AnalyticsScreen из './screens/AnalyticsScreen '; Navigation.registerComponent (' drawer.HomeScreen ', () => HomeScreen); Navigation.registerComponent ('drawer.AnalyticsScreen', () => AnalyticsScreen); Navigation.startSingleScreenApp ({screen: {screen: 'drawer.HomeScreen', title: 'Home'}});
# 5: Создайте компонент SideDrawer.
Внутри папки screen создайте один файл с именем SideDrawer.js и добавьте следующий контент.
Это компонент, который мы будем отображать как выдвижной элемент боковой панели.
// SideDrawer.jsimport React, {Component} из 'react'; импорт {View, Text, Dimensions, StyleSheet} из 'react-native'; экспортный класс по умолчанию SideDrawer расширяет Component {render () {return ( SideDrawer )}} const styles = StyleSheet.create ({container: {marginTop: 22, backgroundColor: 'white', width: Dimensions.get ("окно"). width * 0.8}});
Теперь нам нужен один файл конфигурации с именем startMainTab.js внутри папка экранов. Итак, давайте создадим его.
//startMainTab. jsimport {Навигация} из 'react-native-navigation'; импортировать значок из 'react-native-vector-icons/Ionicons'; const startTabs = () => {Promise.all ([Icon.getImageSource ("ios-share-alt", 30), Icon.getImageSource ("ios-menu", 30)]). then (sources => {Навигация .startTabBasedApp ({вкладки: [{screen: 'drawer.AnalyticsScreen', label: 'Analytics', title: 'Analytics', icon: sources [0], navigatorButtons: {leftButtons: [{icon: sources [1], title] : "Menu", id: 'sideDrawerToggle'}]}}], ящик: {left: {screen: 'drawer.SideDrawer'}}});});} экспорт startTabs по умолчанию;
Итак, здесь мы использовали одну вкладку с названием AnalyticsScreen.js. Кроме того, мы прикрепили к нему ящик.
Теперь нам нужно импортировать его в файл HomeScreen.js . Поэтому, когда пользователь нажимает кнопку, мы видим вкладку AnalyticsScreen .
//AnalyticsScreen.jsimport React, {Component} from 'response'; import {View, Text, Button} из 'react-native'; импортировать startMainTab из './startMainTab'; экспортировать класс по умолчанию HomeScreen расширяет компонент {onButtonPress = () => {startMainTab (); } render () {return ( Главный экран ); }}
Хорошо, теперь запустите приложение с помощью следующей команды.
react-native run-ios
Теперь вы см. главный экран, как показано на изображении ниже.
Теперь щелкните вкладку «Навигация по вкладкам», и вы увидите следующий экран.
# 6: Завершение работы с ящиком.
Внутри AnalyticsScreen.js , нам нужно добавить событие, которое может переключать Drawer. Итоговый файл выглядит так, как показано ниже.
//AnalyticsScreen.jsimport React, {Component} из 'react'; импорт {View, Text} из 'react-native'; экспорт класса по умолчанию AnalyticsScreen расширяет Component {конструктор (реквизит) {супер (реквизит); this.props.navigator.setOnNavigatorEvent (this.onNavigatorEvent); } onNavigatorEvent = событие => {if (event.type === "NavBarButtonPress") {if (event.id === "sideDrawerToggle") {this.props.navigator.toggleDrawer ({сторона: 'left'}); }}} render () {return ( Your AnalyticsScreen )}}
Также зарегистрируйте SideDrawer.js внутри файла App.js .
//App.jsimport {Navigation} из response-native-navigation '; импортировать HomeScreen из' ./ screen/HomeScreen '; импортировать AnalyticsScreen из'./screen/AnalyticsScreen '; импортировать SideDrawer из' ./screens/SideDrawer';Navigation.registerComponent('drawer.HomeScreen ', () => HomeScreen); Navigation.registerComponent (' drawer.SideDrawer ', () => SideDrawer) ; Navigation.registerComponent ('drawer.AnalyticsScreen', () => AnalyticsScreen); Navigation.startSingleScreenApp ({screen: {screen: 'drawer.HomeScreen', title: 'Home'}});
Сохраните файл, перейдите в Симулятор и обновите экран. Теперь вы можете переключать ящик.
Наконец, мы достигли нашей цели и создали рабочий ящик. Пример React Native Drawer Navigator завершен. Спасибо, что взяли. Я разместил этот код на Github.
Код Github
