С постоянно растущей популярностью смартфонов разработчики ищут решения для создания мобильных приложений. Для разработчиков с
В этом руководстве мы более подробно рассмотрим React Native. Вы узнаете абсолютные основы начала работы с ним. В частности, мы рассмотрим следующее:
что такое React Native
что такое выставка
как настроить среду разработки React Native с помощью Expo
как создать приложение с React Native
Предпосылки
В этом руководстве предполагается, что у вас есть опыт
Что такое React Native?
React Native — это фреймворк для создания приложений, которые работают как на Android, так и на iOS. Он позволяет создавать настоящие нативные приложения с использованием JavaScript и React. Это отличается от таких фреймворков, как Cordova, где вы используете HTML для создания пользовательского интерфейса, который затем будет просто отображаться во встроенном мобильном браузере устройства (WebView). React Native имеет встроенные компоненты, которые скомпилированы в собственные компоненты пользовательского интерфейса, а ваш код JavaScript выполняется через виртуальную машину. Это делает React Native более производительным, чем Cordova.
Еще одним преимуществом React Native является возможность доступа к собственным функциям устройства. Существует множество подключаемых модулей, которые можно использовать для доступа к собственным функциям устройства, таким как камера и различные датчики устройства. Если вам нужна функция для конкретной платформы, которая еще не реализована, вы также можете создавать свои собственные нативные модули, хотя это потребует от вас значительных знаний нативной платформы, которую вы хотите поддерживать (Java или Kotlin). для Android и Objective C или Swift для iOS).
Если вы пришли сюда и не знакомы с React, вам может быть интересно, что это такое. React — это библиотека JavaScript для Интернета для создания пользовательских интерфейсов. Если вы знакомы с MVC, это в основном представление в MVC. Основная цель React — позволить разработчикам создавать многократно используемые компоненты пользовательского интерфейса. Примеры этих компонентов включают кнопки, ползунки и карточки. React Native взял идею создания многократно используемых компонентов пользовательского интерфейса и привнес ее в разработку мобильных приложений.
Что такое Экспо?
Прежде чем приехать сюда, вы, возможно, слышали об Экспо. Он даже упоминается в официальной документации React Native, так что вам может быть интересно, что это такое.
Проще говоря, Expo позволяет создавать приложения React Native без первоначальной головной боли, связанной с настройкой среды разработки. Для этого требуется только установить Node на вашем компьютере и клиентское приложение Expo на вашем устройстве или эмуляторе.
Но именно так изначально продается Экспо. На самом деле это гораздо больше. Expo на самом деле является платформой, которая дает вам доступ к инструментам, библиотекам и сервисам для более быстрого создания приложений для Android и iOS с помощью React Native. Expo поставляется с SDK, который включает в себя большинство API, которые вы можете запросить в платформе разработки мобильных приложений:
Камера
Средство выбора изображений
Фейсбук
GoogleВход
Место нахождения
MapView
Разрешения
Всплывающие уведомления
Video
Это лишь некоторые из API, к которым вы получаете доступ из коробки, если начнете создавать приложения React Native с помощью Expo. Конечно, эти
Обычный React Native или Expo?
Главный вопрос заключается в том, что выбрать — простой React Native или Expo? На самом деле нет правильного или неправильного ответа. Все зависит от контекста и ваших потребностей. Но я думаю, можно с уверенностью предположить, что вы читаете это руководство, потому что хотите быстро начать работу с React Native. Итак, я пойду дальше и порекомендую вам начать с Экспо. Это быстро, просто и легко настроить. Вы можете сразу погрузиться в работу с кодом React Native и почувствовать, что он может предложить, всего за пару часов.
Но по мере того, как вы начинаете понимать различные концепции и возникает потребность в различных нативных функциях, вы можете обнаружить, что Expo является своего рода ограничением. Да, в нем доступно множество нативных функций, но поддерживаются не все нативные модули, доступные для стандартных проектов React Native.
Примечание: такие проекты, как unimodules, начинают сокращать разрыв между стандартными проектами React Native и проектами Expo, поскольку они позволяют разработчикам создавать собственные модули, которые работают как для React Native, так и для ExpoKit.
Настройка среды разработки React Native
Чтобы быстро начать работу с React Native, рекомендуется настроить Expo.
Единственным предварительным условием для настройки Expo является то, что на вашем компьютере должен быть установлен Node.js. Для этого вы можете либо перейти на официальную страницу загрузки Node и загрузить соответствующие двоичные файлы для вашей системы, либо использовать менеджер версий, который позволяет вам установить несколько версий Node и переключаться между ними по желанию.
После установки Node.js установите интерфейс командной строки Expo. Это используется для создания, обслуживания, упаковки и публикации проектов:
npm install -g
Затем установите Yarn, предпочтительный менеджер пакетов для Expo:
npm install -g yarn
Это действительно все, что нужно! Следующим шагом является загрузка клиентского приложения Expo для Android или iOS. Обратите внимание, что это единственный способ запускать приложения Expo, пока они еще находятся в разработке. Когда вы будете готовы отправить приложение, вы можете следовать этому руководству, чтобы создать автономные двоичные файлы для iOS и Android, которые можно отправить в Apple App Store и Google Play Store.
Что мы будем строить
Теперь, когда ваша среда разработки настроена, мы можем взглянуть на приложение, которое собираемся создать — приложение для поиска покемонов. Это позволит пользователю ввести имя покемона в поле ввода, прежде чем получать данные о покемоне из внешнего API и отображать их пользователю.
Вот как будет выглядеть готовая вещь:
Приложение для поиска покемонов
Как всегда, вы можете найти исходный код в нашем репозитории GitHub.
Начальная загрузка приложения
На своем терминале выполните следующую команду, чтобы создать новый проект React Native с помощью Expo:
expo init RNPokeSearch
В разделе «Управляемый рабочий процесс «выберите пустой. По умолчанию это установит зависимости с помощью Yarn.
открытие выставки
Вы можете спросить, что такое этот управляемый рабочий процесс и рабочий процесс Bare. Это два типа рабочих процессов, которые поддерживает Expo. Благодаря управляемому рабочему процессу вам нужно иметь дело только с JavaScript, а Expo сделает все за вас. Находясь в рабочем процессе Bare, вы имеете полный контроль над нативным кодом. Он дает вам ту же свободу, что и React Native CLI, но с дополнительным бонусом в виде библиотек и сервисов Expo. Вы можете посетить эту вводную страницу управляемых и пустых приложений, если хотите узнать больше о рабочих процессах в Expo.
Как и в
yarn add pokemon axios
Структура каталога проекта React Native
Прежде чем мы приступим к кодированию, давайте сначала посмотрим на структуру каталогов проекта React Native, созданного с помощью Expo:
Каталог выставочных проектов
Вот разбивка наиболее важных файлов и папок, которые вам нужно запомнить:
App.js: основной файл проекта. Здесь вы начнете разработку своего приложения. Любые изменения, внесенные вами в этот файл, будут отражены на экране.
src: действует как основная папка, в которой хранится весь исходный код, относящийся к самому приложению. Обратите внимание, что это не включено в проект по умолчанию, созданный Expo CLI. Имя этой папки может быть любым. Некоторые люди appтакже используют.
assets: здесь хранятся активы приложения, такие как значки и заставки.
package.json: куда добавляются название и версии библиотек, которые вы установили для этого проекта.
node_modules: где хранятся установленные вами библиотеки. Обратите внимание, что он уже содержит много папок до того, как вы установили две библиотеки ранее. Это связано с тем, что React Native также имеет свои собственные зависимости. То же самое верно для всех других библиотек, которые вы устанавливаете.
Пока не обращайте внимания на остальные папки и файлы, так как они нам не понадобятся, когда мы только начнем.
Запуск приложения
На этом этапе вы можете запустить приложение, выполнив приведенную ниже команду. Прежде чем делать это, убедитесь, что вы уже установили соответствующий клиент Expo (Android или iOS) для своего телефона и что он подключен к той же сети, что и ваш компьютер. Если у вас нет устройства Android или iOS, на котором вы можете протестировать, вы можете использовать эмулятор Android Studio или симулятор iOS, чтобы запустить приложение на своем компьютере:
yarn start
После запуска он отобразит
Начало выставки пряжи
Откройте клиентское приложение Expo и на вкладке проектов нажмите «Сканировать
Клиентское приложение выставки
Если вы тестируете на реальном устройстве, встряхните его, чтобы появилось меню разработчика.
Настройки разработчика React Native
Убедитесь, что функция быстрого обновления включена. Это позволяет автоматически перезагружать изменения, которые вы вносите в свои компоненты.
Кодирование приложения
В Expo есть много встроенных компонентов, которые вы можете использовать для достижения желаемого. Просто просмотрите документацию API, и вы найдете информацию о том, как реализовать то, что вам нужно. В большинстве случаев вам нужен либо определенный компонент пользовательского интерфейса, либо SDK, который работает со службой, которую вы планируете использовать. Чаще всего вот как будет выглядеть ваш рабочий процесс:
Найдите существующий пакет, который реализует то, что вы хотите.
Установите его.
Свяжите это. Это необходимо только в том случае, если вы используете простой рабочий процесс Expo, а установленный вами пакет имеет соответствующую нативную зависимость.
Используйте его в своем проекте.
Теперь, когда вы настроили свою среду и немного узнали о рабочем процессе, мы готовы приступить к кодированию приложения.
mkdir -p src/components
touch src/Main.js
touch src/components/Pokemon.js
Добавьте фиктивный контент в оба файла:
// src/Main.js
import React, { Component } from ‘react’;
export default class Main extends Component {
render () {
return null;
}
}
// src/components/Pokemon.js
import React from ‘react’;
const Pokemon = () => null;
Затем замените содержимое App.jsфайла следующим кодом:
import React from ‘react’;
import Main from '. /src/Main’;
function App () {
return
}
export default App;
Первая строка кода выше импортирует React. Вам нужно импортировать этот класс каждый раз, когда вы хотите создать компонент.
Во второй строке мы импортируем пользовательский Mainкомпонент. Мы заполним это позже, но пока знайте, что именно здесь мы будем размещать большую часть нашего кода.
После этого мы создаем компонент, создавая новую функцию. Все, что делает эта функция, это возвращает Mainкомпонент.
Наконец, мы экспортируем класс, чтобы его можно было импортировать и отображать в Expo.
Далее в src/Main.jsфайл и добавляем следующее:
// src/Main.js
import React, { Component } from ‘react’;
import {
SafeAreaView,
View,
Text,
TextInput,
Button,
Alert,
StyleSheet,
ActivityIndicator,
} from ‘
Вторая строка импортирует компоненты, встроенные в React Native. Вот что делает каждый из них:
SafeAreaView: для рендеринга контента в границах безопасной области устройства. Это автоматически добавляет заполнение, которое оборачивает его содержимое, чтобы оно не отображалось на выемках камеры и в области корпуса датчика устройства.
View: основной строительный блок пользовательского интерфейса. В основном это используется в качестве оболочки для всех других компонентов, поэтому они структурированы таким образом, что вы можете легко стилизовать их. Думайте об этом как об эквиваленте
Text: для отображения текста.
TextInput: компонент пользовательского интерфейса для ввода текста. Этот текст может быть обычным текстом, электронной почтой, паролем или цифровым блоком.
Button: для отображения кнопки для конкретной платформы. Этот компонент выглядит
Alert: для отображения предупреждений и подсказок.
ActivityIndicator: для отображения индикатора анимации загрузки.
StyleSheet: для определения стилей компонентов.
Далее импортируем библиотеки, которые мы установили ранее:
import axios from ‘axios’;
import pokemon from ‘pokemon’;
А также пользовательский Pokemonкомпонент, используемый для отображения данных о покемонах:
import Pokemon from «. /components/Pokemon»;
Примечание: если Expo не может разрешить Pokemonкомпонент (или любой другой), попробуйте перезапустить сервер.
Поскольку для получения необходимых данных о покемонах необходимо сделать два запроса API, мы должны установить базовый
const POKE_API_BASE_URL = ‘https: //pokeapi.co/api/v2';
Затем определите класс компонента и инициализируйте его состояние:
export default class Main extends Component {
constructor (props) {
super (props)
this.state = {
isLoading: false, // decides whether to show the activity indicator or not
searchInput: '', // the currently input text
name: '', // Pokémon name
pic: '', // Pokémon image URL
types: [], // Pokémon types array
desc: '', // Pokémon description
};
}
render () {
return null;
}
}
В приведенном выше коде мы определяем главный компонент приложения. Вы можете сделать это, определив класс ES6 и расширив класс React Component. Это еще один способ определения компонента в React. В App.jsфайле мы создали функциональный компонент. На этот раз мы создаем компонент на основе классов.
Основное различие между ними заключается в том, что функциональные компоненты используются только для презентационных целей. Функциональные компоненты не нуждаются в сохранении собственного состояния, потому что все данные, которые им требуются, просто передаются им через реквизиты. С другой стороны, компоненты на основе классов поддерживают свое собственное состояние и обычно передают данные функциональным компонентам. Обратите внимание, что это традиционный способ создания компонентов в React. Более современным подходом было бы придерживаться функционального компонента и использовать обработчик состояния для управления состоянием — хотя в этом руководстве мы просто собираемся не усложнять и придерживаться компонента на основе классов.
Если вы хотите узнать больше о разнице между функциональными и основанными на классах компонентами, прочитайте учебник «Функциональные и классовые компоненты в React «.
Возвращаясь к коду, мы инициализируем состояние внутри нашего компонента. Вы определяете его как простой объект JavaScript. Любые данные, которые переходят в состояние, должны отвечать за изменение того, что отображается компонентом. В данном случае мы ставим isLoadingдля управления видимостью индикатора активности и searchInputдля отслеживания вводимого значения в поле поиска.
Это важная концепция, которую следует помнить. Встроенные компоненты React Native и даже пользовательские компоненты, которые вы создаете, принимают свойства, которые управляют следующим:
что отображается на экране (источник данных)
как они это представляют (структура)
как это выглядит (стили)
какие действия выполнять, когда пользователь с ним взаимодействует (функции)
Мы рассмотрим эти свойства более подробно в следующем разделе. На данный момент знайте, что значения этих свойств обычно обновляются через состояние.
Остальные значения состояния предназначены для данных покемонов. Хорошей практикой является установка начального значения с тем же типом данных, который вы собираетесь хранить позже, поскольку это также служит документацией.
Структурирование и стилизация компонентов
Вернемся к определению класса компонента. Когда вы расширяете Componentкласс React, вы должны определить render () метод. Он содержит код для возврата пользовательского интерфейса компонента и состоит из ранее импортированных компонентов React Native.
Каждый компонент имеет свой набор реквизитов. Это в основном атрибуты, которые вы передаете компоненту для управления определенным его аспектом. В приведенном ниже коде у большинства из них есть styleсвойство, которое используется для изменения стилей компонента. Вы можете передать любой тип данных в качестве реквизита. Например, onChangeTextреквизит TextInput— это функция, а typesреквизит Pokemon— массив объектов. Позже в Pokemonкомпоненте вы увидите, как будут использоваться реквизиты.
Замените render () метод Main.jsследующим:
render () {
const { name, pic, types, desc, searchInput, isLoading } = this.state; // extract the Pokémon data from the state
return (
<TextInput
style={styles.textInput}
onChangeText={ (searchInput) => this.setState ({ searchInput }) }
value={this.state.searchInput}
placeholder="Search Pokémon"
/>
<Button
onPress={this.searchPokemon}
title="Search"
color="#0064e1"
/>
{isLoading &&
{! isLoading && (
) }
) ;
}
Разбив код выше, мы сначала извлекаем данные состояния:
const { name, pic, types, desc, searchInput, isLoading } = this.state;
Затем мы возвращаем пользовательский интерфейс компонента, который следует следующей структуре:
SafeAreaView.wrapper;
View.container;
View.headContainer;
View.textInputContainer;
TextInput;
View.buttonContainer;
Button;
View.mainContainer;
ActivityIndicator;
Pokemon;
Приведенная выше структура оптимизирована для использования Flexbox. Идем дальше и определяем стили компонентов внизу файла:
const styles = StyleSheet.create ({
wrapper: {
flex: 1,
},
container: {
flex: 1,
padding: 20,
backgroundColor: '#F5FCFF’,
},
headContainer: {
flex: 1,
flexDirection: ‘row’,
marginTop: 100,
},
textInputContainer: {
flex: 2,
},
buttonContainer: {
flex: 1,
},
mainContainer: {
flex: 9,
},
textInput: {
height: 35,
marginBottom: 10,
borderColor: '#ccc’,
borderWidth: 1,
backgroundColor: '#eaeaea’,
padding: 5,
},
}) ;
В React Native вы определяете стили, используя StyleSheet.create () и передавая объект, содержащий ваши стили. Эти определения стилей в основном являются объектами JavaScript и имеют ту же структуру, что и ваши обычные стили CSS:
element: {
property: value;
}
Для wrapperand containerустановлено значение flex: 1, что означает, что он будет занимать все доступное пространство, поскольку у них нет братьев и сестер. React Native по умолчанию имеет значение flexDirection: ‘column’, что означает, что гибкие элементы будут располагаться вертикально.
столбец направления гибкости
Напротив, (flexDirection: ‘row’) размещает элементы горизонтально.
строка направления сгибания
Это отличается от headContainer, потому что, несмотря на то, что он установлен на flex: 1, он имеет mainContainerсвоего брата. Это означает, что headContainerи mainContainerоба будут иметь одно и то же пространство. mainContainerустановлено значение, flex: 9поэтому он будет занимать большую часть доступного пространства (около 90%), в то время как headContainerбудет занимать только около 10%.
Перейдем к содержимому headContainer. Он имеет textInputContainerи buttonContainerкак его дети. Он установлен на flexDirection: ‘row’, так что его дочерние элементы будут располагаться горизонтально. Тот же принцип применяется, когда речь идет о разделении пространства: textInputContainerзанимает две трети доступного горизонтального пространства, а buttonContainerзанимает только одну треть.
Остальные стили говорят сами за себя, если у вас есть фон CSS. Просто не забудьте пропустить -и установить следующий символ в верхнем регистре. Например, если вы хотите установить
Примечание. Не все свойства CSS, доступные в Интернете, поддерживаются в React Native. Например, не поддерживаются такие вещи, как числа с плавающей запятой или свойства таблицы. Вы можете найти список поддерживаемых свойств CSS в документации для компонентов View и Text.
Обработка событий и обновление состояния
Давайте теперь разберем код для компонентов TextInputи. ButtonВ этом разделе мы поговорим об обработке событий, выполнении
Начнем с изучения кода для TextInput:
<TextInput
style={styles.textInput}
onChangeText={ (searchInput) => this.setState ({ searchInput }) }
value={this.state.searchInput}
placeholder="Search Pokémon"
/>
В приведенном выше коде мы устанавливаем функцию для выполнения, когда пользователь вводит
Далее переходим к Buttonкомпоненту. Здесь мы слушаем onPressсобытие:
// src/Main.js
import React, { Component } from ‘react’;
...
export default class Main extends Component {
...
render () {... }
searchPokemon = async () => {
try {
const pokemonID = pokemon.getId (this.state.searchInput) ; // check if the entered Pokémon name is valid
this.setState ({
isLoading: true, // show the loader while request is being performed
}) ;
const { data: pokemonData } = await axios.get (
`${POKE_API_BASE_URL}/pokemon/${pokemonID}`
) ;
const { data: pokemonSpecieData } = await axios.get (
`${POKE_API_BASE_URL}/
) ;
const { name, sprites, types } = pokemonData;
const { flavor_text_entries } = pokemonSpecieData;
this.setState ({
name,
pic: sprites.front_default,
types: this.getTypes (types),
desc: this.getDescription (flavor_text_entries),
isLoading: false, // hide loader
}) ;
} catch (err) {
Alert.alert (‘Error’, ‘Pokémon not found’) ;
}
};
}
const styles = StyleSheet.create ({... }) ;
Разбивая приведенный выше код, мы сначала проверяем, действительно ли введенное имя покемона. Если он действителен, возвращается национальный идентификатор покедекса (если вы открываете ссылку, это число над именем покемона), и мы предоставляем его в качестве параметра для
Вот getTypes () функция. Все, что он делает, это переназначает свойства slotи typeтипов покемонов на idи name:
getTypes = (types) =>
types.map (({ slot, type }) => ({
id: slot,
name: type.name,
}));
Вот getDescription () функция. Это находит первую английскую версию flavor_text:
getDescription = (entries) =>
entries.find ((item) => item.language.name === ‘en’).flavor_text;
Добавьте их после searchPokemonфункции, например:
import React, { Component } from ‘react’;
...
export default class Main extends Component {
...
render () {... }
searchPokemon = async () => {... };
getTypes = (types) => types.map (...) ;
getDescription = (entries) => entries.find (...) ;
}
const styles = StyleSheet.create ({... }) ;
Компонент покемонов
Теперь, когда наше приложение получает данные из API, пришло время расширить Pokemonкомпонент, который мы заглушили ранее, чтобы мы могли отображать указанные данные. Откройте src/components/Pokemon.jsфайл и замените содержимое следующим:
import React from ‘react’;
import { View, Text, Image, FlatList, StyleSheet } from ‘
const Pokemon = ({ name, pic, types, desc }) => {
if (! name) {
return null;
}
return (
<FlatList
columnWrapperStyle={styles.types}
data={types}
numColumns={2}
keyExtractor={ (item) => item.id.toString () }
renderItem={ ({ item }) => (
) }
/>
) ;
};
//
const styles = StyleSheet.create ({
mainDetails: {
padding: 30,
alignItems: ‘center’,
},
image: {
width: 100,
height: 100,
},
mainText: {
fontSize: 25,
fontWeight: ‘bold’,
textAlign: ‘center’,
},
description: {
marginTop: 20,
},
types: {
flexDirection: ‘row’,
marginTop: 20,
},
type: {
padding: 5,
width: 100,
alignItems: ‘center’,
},
typeText: {
color: '#fff’,
},
normal: {
backgroundColor: '#8a8a59',
},
fire: {
backgroundColor: '#f08030',
},
water: {
backgroundColor: '#6890f0',
},
electric: {
backgroundColor: '#f8d030',
},
grass: {
backgroundColor: '#78c850',
},
ice: {
backgroundColor: '#98d8d8',
},
fighting: {
backgroundColor: '#c03028',
},
poison: {
backgroundColor: '#a040a0',
},
ground: {
backgroundColor: '#e0c068',
},
flying: {
backgroundColor: '#a890f0',
},
psychic: {
backgroundColor: '#f85888',
},
bug: {
backgroundColor: '#a8b820',
},
rock: {
backgroundColor: '#b8a038',
},
ghost: {
backgroundColor: '#705898',
},
dragon: {
backgroundColor: '#7038f8',
},
dark: {
backgroundColor: '#705848',
},
steel: {
backgroundColor: '#b8b8d0',
},
fairy: {
backgroundColor: '#e898e8',
},
}) ;
export default Pokemon;
В приведенном выше коде мы сначала проверили, nameимеет ли ложное значение. Если это так, мы просто возвращаем null, так как рендерить нечего.
Мы также используем два новых встроенных компонента React Native:
Image: используется для отображения изображений из Интернета или из файловой системы.
FlatList: используется для отображения списков
Как мы видели ранее, мы передаем данные о покемонах в качестве реквизита для этого компонента. Мы можем извлечь эти реквизиты так же, как мы извлекаем отдельные свойства из объекта:
const Pokemon = ({ name, pic, types, desc }) => {
//...
};
Компонент Imageтребует, sourceчтобы ему было передано. Это sourceможет быть образ из файловой системы или, в данном случае, образ из Интернета. Первый требует, чтобы изображение было включено с помощью require (), а второй требует, чтобы
resizeModeпозволяет вам контролировать изменение размера изображения в зависимости от его контейнера. Мы использовали contain, что означает, что он изменит размер изображения так, чтобы оно помещалось в свой контейнер, сохраняя при этом соотношение сторон. Обратите внимание, что контейнер — это Imageсам компонент. Мы установили его widthи heightна 100, поэтому размер изображения будет изменен в соответствии с этими размерами. Если исходное изображение имеет большую ширину, чем его высота, будет использоваться a widthof, в то время как the будет корректироваться соответствующим образом для сохранения соотношения сторон. Если исходный размер изображения меньше, он просто сохранит исходный размер:100height
Далее FlatListкомпонент. Он используется для рендеринга списка элементов. В данном случае мы используем его для отображения типов покемонов. Для этого требуется data, который представляет собой массив, содержащий элементы, которые вы хотите отобразить, и renderItem, который является функцией, отвечающей за рендеринг каждого элемента в списке. Доступ к элементу в текущей итерации можно получить так же, как к свойствам в функциональном компоненте:
<FlatList
columnWrapperStyle={styles.types}
data={types}
numColumns={2}
keyExtractor={ (item) => item.id.toString () }
renderItem={ ({ item }) => (
) }
/>
В приведенном выше коде мы также предоставили следующие реквизиты:
columnWrapperStyle: используется для указания стилей для каждого столбца. В этом случае мы хотим отображать каждый элемент списка как встроенный, поэтому мы указали flexDirection: ‘row’.
numColumns: максимальное количество столбцов, которые вы хотите отобразить для каждой строки в списке. В данном случае мы указали 2, потому что у покемона может быть не более двух типов.
keyExtractor: функция, используемая для извлечения ключей для каждого элемента. На самом деле вы можете опустить это, если передадите keyсвойство самому внешнему компоненту каждого из элементов списка.
Теперь вы можете протестировать приложение на своем устройстве или в эмуляторе:
yarn start
Находясь на терминале, вы можете нажать a, если хотите запустить приложение на эмуляторе Android или iна симуляторе iOS.
Также обратите внимание, что имена покемонов должны начинаться с заглавной буквы — например, «Пикачу», а не «пикачу».
Заключение и следующие шаги
Вот и все! В этом руководстве вы узнали, как настроить среду разработки React Native с помощью Expo. Вы также узнали, как создать свое первое приложение React Native.
