Пример встроенной навигации React | Реагировать на навигацию

React Native Navigation — это встроенная реализация навигации, а не реализация на основе JavaScript. React Navigation родился из потребности сообщества React Native в расширяемом, но простом в использовании решении для навигации, полностью написанном на JavaScript, поверх надежных нативных примитивов. .

Как и в предыдущем руководстве, мы создали экран входа в систему; теперь мы строим навигацию для нашего приложения. В React.js мы использовали библиотеку response-router-dom для маршрутизации между компонентами. Для приложения React Native мы установим библиотеку под названием React Navigation.

Если вы новичок в React Native , то статья ниже поможет вам начать работу.

Статья по теме: Руководство для начинающих по созданию приложения React Native

Пример навигации React Native

React Native Navigation обеспечивает 100% встроенную навигацию по платформе как для iOS, так и для Android для приложений React Native. API JavaScript прост и кроссплатформенен. В веб-браузере вы можете ссылаться на разные страницы с помощью тега привязки ( ).

Когда пользователь щелкает ссылку, URL-адрес помещается в стек истории браузера. Когда пользователь нажимает кнопку «Назад», браузер выводит элемент из верхней части стека истории, поэтому активной страницей становится ранее посещенная страница.

React Native не имеет встроенного представления о стеке глобальной истории, как это делает веб-браузер — это Здесь React Navigation входит в историю.

StackNavigator от React Navigation предоставляет нам способ для нашего приложения переходить между экранами и управлять историей навигации. Если в нашем приложении используется только один StackNavigator , то он концептуально аналогичен тому, как веб-браузер обрабатывает состояние навигации.

Принципиальная разница между тем, как это работает в веб-браузере, и React Navigation состоит в том, что StackNavigator React Navigation предоставляет жесты и анимации, которые вы ожидаете на Android и iOS при переходе между маршрутами в стеке.

Шаг 1. Установите React Native

Хорошо, теперь установите собственный проект React с помощью следующей команды.

 sudo npm install -g react-native-cli  

После этого нам нужно сгенерировать проект и перейти в этот каталог.

 react-native init RNNavigationcd RNNavigation 

Теперь, Я показываю вам этот пример на устройстве iOS, поэтому; нам нужно начать разработку ios. Выполните следующую команду, чтобы сгенерировать сборку iOS.

 react-native run-ios 

Шаг 2. Создайте два экрана для нашего проекта.

В корневом каталоге создайте одну папку с именем screen. Зайдите в эту папку и создайте два экрана.

  1. Настройки. js
  2. Home.js

Теперь добавьте следующий код в Файл Settings.js .

//Settings.jsimport React, {Component} из 'react'; import {View, Text, Button} из 'react-native';  Экспорт класса Настройки расширяет Компонент {render () {return (  Это экран настроек  )}}; экспорт настроек по умолчанию; 

После этого добавьте следующий код в файл Home.js .

//Home.jsimport React, {Component} из 'response'; импортируйте {View, Text} из  'react-native'; экспортный класс Home расширяет Component {render () {return (  Это главный экран  )}} экспорт по умолчанию Home 

Итак, теперь у нас есть оба экрана. Нам просто нужно добавить к нему навигацию.

Шаг 3. Установите пакет React Navigation.

Перейдите в корень вашего проекта. и в терминале добавьте пакет, используя следующую команду.

 yarn add response-navigation 

Теперь добавьте модуль response-navigation внутри Файл App.js .

//App.jsimport {StackNavigator} из 'react-navigation'; 

StackNavigator позволяет вашему приложению переходить между экранами и управлять историей навигации.

Теперь импортируйте два экрана, которые мы создали внутри App.js файл.

//App.jsimport Settings from './screens/Settings';import Home from' ./screens/Home '; 

Теперь пропустите оба экрана функции StockNavigator .

//App.jsconst AppNavigator = StackNavigator ({SettingScreen: {screen: Settings}, HomeScreen: {screen: Home  }}); 

Итак, наш последний App.js файл выглядит так.

//App.jsimport React, {Component} из 'react'; импорт {Platform, StyleSheet, Text, View} из 'react-native'; import {StackNavigator}  из 'response-navigation'; импортировать настройки из './screens/Settings';import Home из' ./screens/Home';const AppNavigator = StackNavigator ({SettingScreen: {screen: Settings}, HomeScreen: {screen: Home}  }); класс экспорта по умолчанию. Приложение расширяет компонент {render () {return ();  }} 

Шаг 4. Добавьте кнопку навигации в файл Settings.js.

Напишите следующий код внутри Файл Settings.js .

//Settings.jsexport class Settings расширяет Component {render () {return (  Это экран настроек Текст> )}}; 

Итак, мы сделали следующее: когда пользователь нажимает эту кнопку, выполняется перенаправление на HomeScreen , который мы определили в файле App.js . Так что наш экран плавно меняется на тот, по которому щелкнули. В нашем случае это HomeScreen . Наш последний файл Settings.js выглядит так.

//Settings.jsimport React, {Component} из 'react'; import {View, Text, Button  } из 'react-native'; экспортный класс Settings расширяет Component {render () {return (  Это экран настроек  )}}; экспорт настроек по умолчанию; 

Шаг 5. Перезагрузите приложение.

Теперь перезагрузите симулятор iPhone. Вы увидите такой экран.

Теперь вы На экране можно увидеть, что есть кнопка «Домой», поэтому после нажатия этой кнопки мы можем перейти к новому окну.

Над экраном находится экран настроек, а после перехода мы получаем главный экран.

Итак, приведенный выше пример является основным примером React Native Navigation . Мы увидим примеры продвинутого уровня в будущих публикациях. Итак, Учебное пособие по использованию React Native Navigation закончено. Спасибо.

Рекомендуемые сообщения

Компоненты React Native Swipe

Пример React Native Drawer Navigator

Пример представления вкладки React Native

Пример модального окна React Native

Пример Redux в React Native

Оцените статью
nanomode.ru
Добавить комментарий