Учебное пособие с примерами React Native Fetch с нуля

Учебное пособие с нуля по React Native Fetch сегодня является ведущей темой. В этом руководстве мы увидим, как интегрировать приложения, поддерживающие React, с внутренним кодом, используя fetch API . Работа в сети по своей сути асинхронная операция.

Обзор React Native Fetch

  • Шаг 1. Установите приложение React Native на Mac.
  • Шаг 2. Создайте навигацию для различных компонентов.
  • Шаг 3. Создайте текстовый ввод для пользовательского поиска.
  • Шаг 4. Добавьте изменение и отправьте события.
  • Шаг 5. Отправьте сетевой запрос на сервер API.
  • Шаг 6. Отобразите пользователей на экране мобильного устройства.
  • Шаг 7. Отображение ошибок, если пользователь не найден.

Пример React Native Fetch

Fetch — лучший сетевой API на основе Promise, который был выбран для React Native .

Так много людей путают с интерфейсными и внутренними службами. Они даже не могут представить себе, как их интерфейсная сборка может взаимодействовать с сервером.

Какие данные были переданы из их приложения на сервер? Какого типа данные перемещаются вперед и назад?

Итак, в этом руководстве вы увидите, как мы можем использовать серверный API в нашей сборке React Native. Мы будем использовать Github API для этого примера, потому что он прост в использовании и понятен.

Мы начнем наш проект с установки React Native. Итак, сначала нам нужно установить собственный проект React.

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

Введите следующую команду, чтобы установить его глобально; если вы уже установили, вам не нужно устанавливать create-response-native-app глобально.

 sudo npm install -g create-response-native-app  

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

 create-response-native-app Networking 

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

 cd Networkingnpm run ios 

Мы собираемся создать этот небольшой проект как iOS приложение .

Если вы пользователь Windows, то вы не можете продолжать этот пример, но хотя вы можете начать с шага, на котором будет использоваться выборка, чтобы вы могли понять, как работает выборка, потому что она не зависит от платформы.

Теперь, после компиляции проекта, мы увидим, что он откроет симулятор IOS со следующим экраном по умолчанию.

Мы будем использовать NavigatorIOS для реализации стека навигации.. NavigatorIOS — это оболочка вокруг UINavigationController , позволяющая создать стек навигации.

Он работает так же, как и в собственном приложении с использованием UINavigationController , обеспечивая ту же анимацию и поведение, что и в UIKit .

Чтобы настроить навигатор, предоставьте свойство initialRoute с объектом маршрута.

Объект маршрута используется для описания каждой сцены, в которой ваше приложение переходит к initialRoute , который представляет первый маршрут в навигаторе. Таким образом, вы импортируете этот компонент в файл App.js .

//App.jsimport {StyleSheet, Text, View, NavigatorIOS} из 'react-native  '; 

Теперь, после этого, нам нужно создать один компонент. Создайте в корне одну папку с именем src и внутри нее одну папку с именем components.

Внутри папки компонентов создайте один файл с именем

//SearchComponent.jsimport React  , {Component} из 'react'; импорт {View, Text, StyleSheet} из 'react-native'; экспорт класса по умолчанию SearchComponent расширяет Component {render () {return (  Искать пользователя Github  )}} const styles = StyleSheet.create ({main: {flex: 1, padding: 30, marginTop: 65, flexDirection: 'column'  , justifyContent: 'center', backgroundColor: '# 2a8ab7'}, title: {marginBottom: 20, fontSize: 25, textAlign: 'center'}}); 

Я только что добавил несколько стилей и напишите текст в этом компоненте.

Теперь SearchComponent — это компонент, с помощью которого мы можем искать пользователя Github, получать его/ее фотографию профиля и отображать ее в другом компоненте.

Хорошо, теперь импортируйте этот компонент как initialRoute , чтобы при загрузке нашего приложения мы могли видеть этот компонент как главный экран нашего приложения.

//App.jsimport React из 'react'; импорт {StyleSheet, Text, View, NavigatorIOS} из 'react-native'; импорт SearchComponent из './src/components/SearchComponent'; экспорт класса по умолчанию App  расширяет React.Component {render () {return ();  }} const styles = StyleSheet.create ({container: {flex: 1, backgroundColor: '# 111111'},}); 

Итак, экран нашего приложения выглядит так.

Шаг 3. Создайте текстовый ввод для поиска пользователя .

Мы будем использовать компонент TextInput из библиотеки react-native .

Кроме того, я использую компонент TouchableHighlight.

Это оболочка для того, чтобы представления должным образом реагировали на прикосновения. Итак, последний компонент со стилем выглядит так.

//SearchComponent.jsimport React, {Component} из 'react'; импорт {View, Text, StyleSheet, TextInput, TouchableHighlight} из 'react  -native '; экспорт класса по умолчанию SearchComponent расширяет Component {render () {return (  Искать пользователя Github     ПОИСК   )}} const styles =  StyleSheet.create ({main: {flex: 1, padding: 30, marginTop: 65, flexDirection: 'column', justifyContent: 'center', backgroundColor: '# 2a8ab7'}, title: {marginBottom: 20, fontSize: 25  , textAlign: 'center'}, searchInput: {height: 50, padding: 4, marginRight: 5, fontSize: 23, borderWidth: 1, borderColor: 'white', borderRadius: 8, color: 'white'}, buttonText:  {fontSize: 18, color: '# 111', alignS  elf: 'center'}, button: {height: 45, flexDirection: 'row', backgroundColor: 'white', borderColor: 'white', borderWidth: 1, borderRadius: 8, marginBottom: 10, marginTop: 10, alignSelf:  'stretch', justifyContent: 'center'}}); 

Шаг 4. Добавьте события «Изменить» и «Отправить».

Хорошо, нам нужно взять входное имя пользователя и передать его в Github API.

Итак, когда пользователь начинает вводить текст в поле ввода, нам нужно изменить состояние имени пользователя, а затем после нажатия кнопки отправки имя пользователя отправляется в Github API для поиска пользователя.

//SearchComponent.jsimport React, {Component} из 'react'; import {View, Text,  StyleSheet, TextInput, TouchableHighlight} из response-native; экспорт класса по умолчанию SearchComponent расширяет Component {constructor (props) {super (props);  this.state = {имя пользователя: '', ошибка: false} this.handleChange = this.handleChange.bind (это);  this.handleSubmit = this.handleSubmit.bind (это);  } handleChange (e) {this.setState ({имя пользователя: e.nativeEvent.text});  } handleSubmit () {console.log (this.state.username);  } render () {return (  Поиск пользователя Github     ПОИСК   )}} const styles = StyleSheet.create ({main: {flex: 1, padding: 30, marginTop: 65, flexDirection: 'column', justifyContent:  'center', backgroundColor: '# 2a8ab7'}, title: {marginBottom: 20, fontSize: 25, textAlign: 'center'}, searchInput: {height: 50, padding: 4, marginRight: 5, fontSize: 23, borderWidth  : 1, borderColor: 'white', borderRadius: 8, color: 'white'}, buttonText: {fontSize: 18, цвет: '# 111', alignSelf: 'center'}, button: {height: 45, flexDirection:  'row', backgroundColor: 'white', borderColor: 'white', borderWidth: 1, borderRadius: 8, marginBottom: 10, marginTop: 10, alignSelf: 'stretch', justifyContent: 'center'}}); 

Итак, когда вы нажимаете кнопку поиска, мы можем получить имя пользователя в консоли. Для панели консоли вам необходимо ввести комбинацию этих клавиш: cmd + d в симуляторе iOS.

Откроется новый экран, и вам нужно будет запустить удаленную отладку. Он откроет URL-адрес сервера, например http://localhost: 19001/debugger-ui/.

Откройте инструменты разработчика Chrome и перейдите на панель консоли.

Теперь введите любое имя пользователя Github и нажмите кнопку поиска. Вы увидите, что это имя отображается на панели консоли, потому что мы зарегистрировали это имя. Теперь это имя пользователя будет отправлено в Github API .

Шаг 5. Создайте службу FetchUser.

Хорошо, теперь создайте одну папку в каталоге src с именем services. Внутри папки services создайте один новый файл с именем

//FetchUser.jsexport const  getUserInfo = (имя) => {let username = name.toLowerCase (). trim ();  const URL = `https://api.github.com/users/$ {username}`;  return fetch (URL) .then ((res) => res.json ());} 

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

Передайте это имя пользователя в Github API и верните ответ вызывающей функции.

Fetch Библиотека возвращает обещание. Это асинхронная задача, и после обработки данных мы отобразим их на экране.

//SearchComponent.jsimport {getUserInfo} from '../services/FetchUser'; handleSubmit ()  {getUserInfo (this.state.username) .then ((res) => {if (res.message === 'Not Found') {this.setState ({error: 'User not found'});} else {  this.props.navigator.push ({title: res.name || 'Без заголовка', passProps: {userInfo: res}}); this. setState ({ошибка: ложь, имя пользователя: ''})}});  } 

Теперь создайте один новый компонент в папке components с именем

//DashboardComponent.jsimport React, {Component} из 'react'; импорт {Text, View, StyleSheet, Image} из 'react-native'; экспорт класса по умолчанию DashboardComponent extends Component {render () {return (  )}} const styles = StyleSheet.create ({container:  {marginTop: 65, flex: 1}, image: {height: 350}}); 

Теперь импортируйте этот компонент в файл SearchComponent.js .

//SearchComponent.jsimport DashboardComponent из './DashboardComponent';handleSubmit () {getUserInfo (this.state.username) .then ((res) => {if (res.message ==  = 'Not Found') {this.setState ({error: 'User not found'});} else {this.props.navigator.push ({  title: res.name ||  'Без заголовка', passProps: {userInfo: res}, component: DashboardComponent});  this.setState ({ошибка: ложь, имя пользователя: ''})}});  } 

Здесь я сделал то, что fetch даст нам обещание, и после разрешения мы получим данные с сервера.

Если пользователь не найден, мы просто отображаем ошибку, а если пользователь найден, мы передадим эти данные в файл DashboardComponent.js. Он отобразит имя пользователя и изображение пользователя.

Шаг 6. Отображение ошибки, если пользователь не найден.

Внутри функции render () нам нужно поместить условие, что если состояние ошибки заполнено фактической ошибкой, то нам нужно отобразить ошибку пользователю. В противном случае мы не хотим ничего отображать.

//SearchComponent.jsrender () {let showErr = (this.state.error?  {this.state.error} :  );  return (  Поиск пользователя Github     ПОИСК   {showErr} )} 

Наконец, наши файлы SearchComponent.js и DashboardComponent.js выглядят следующим образом.

//SearchComponent.jsimport React, {Component} из 'react'; импорт {View, Text, StyleSheet, TextInput, TouchableHighlight} из 'react-native'; импорт {getUserInfo} из '../services/FetchUser';import  DashboardComponent из './DashboardComponent '; экспорт класса по умолчанию SearchComponent расширяет компонент {конструктор (реквизиты) {супер (реквизиты);  this.state = {имя пользователя: '', ошибка: false} this.handleChange = this.handleChange.bind (это);  this.handleSubmit = this.handleSubmit.bind (это);  } handleChange (e) {this.setState ({имя пользователя: e.nativeEvent.text});  } handleSubmit () {getUserInfo (this.state.username) .then ((res) => {if (res.message === 'Not Found') {this.setState ({error: 'User not found'})  ;} else {this.props.navigator.push ({title: res.name || 'Без заголовка', passProps: {userInfo: res}, component: DashboardComponent}); this.setState ({error: false, username:  ''})}});  } render () {let showErr = (this.state.error?  {this.state.error} :  );  return (  Поиск пользователя Github     SEARCH   {showErr} )}} const  styles = StyleSheet.create ({main: {flex: 1, padding: 30, marginTop: 65, flexDirection: 'column', justifyContent: 'center', backgroundColor: '# 2a8ab7'}, title: {marginBottom: 20, fontSize  : 25, textAlign: 'center'}, searchInput: {height: 50, padding: 4, marginRight: 5, fontSize: 23, borderWidth: 1, borderColor: 'white', borderRadius: 8, color: 'white'},  buttonText: {fontSize: 18, цвет: '# 111', alignSelf: 'center'}, button: {height: 45, flexDirection: 'row', backgroundColor: 'white', borderColor: 'white', borderWidth: 1,  borderRadius: 8, marginBottom: 10, marginTop: 10, alignSelf: 'stretch', justifyConten  t: 'center'}}); 

Также файл DashboardComponent.js .

//DashboardComponent.jsimport React,  {Component} из 'react'; импорт {Text, View, StyleSheet, Image} из 'react-native'; экспорт класса по умолчанию DashboardComponent расширяет Component {render () {return (  )}} const styles = StyleSheet.create ({container: {marginTop: 65, flex: 1}  , image: {height: 350}}); 

Наконец, наше Учебное пособие по использованию React Native Fetch с нуля завершено. Спасибо, что взял это.

Fork Me On Github

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

React Native Application с Laravel API

Нативная навигация с использованием примера нативной навигации React

Пример компонентов React Native Swipe

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

Пример React Native Redux

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