Начало работы с React Native

Настройка среды разработки React Native

В этом разделе мы настроим среду разработки React Native для всех трех основных платформ: Windows, Linux и macOS. Мы также расскажем, как настроить симуляторы для Android и iOS. Наконец, мы расскажем, как настроить Expo. Если вы просто хотите быстро начать работу, я рекомендую вам прокрутить вниз до раздела «Настройка Экспо».

Вот общие шаги по настройке среды. Убедитесь, что эти общие шаги соответствуют шагам для каждой платформы:

1. установить JDK
2. установить Android Studio или Xcode
3. установить сторож
4. обновить переменную среды
5. установить эмулятор
6. установить узел
7. установить React Native CLI

Вы можете перейти к разделу, соответствующему вашей операционной системе. Некоторые шаги — например, настройка Android Studio — в основном одинаковы для каждой операционной системы, поэтому я поместил их в отдельный раздел:

• настройка в Windows
• настройка на Linux
• настройка на macOS
• настройка Android Studio
• установить узел
• создание Экспо
• настройка эмуляторов
• установить React Native CLI
• устранение распространенных ошибок

Настройка в Windows

В этом разделе показано, как установить и настроить программное обеспечение, необходимое для создания приложений React Native в Windows. Windows 10 была использована в тестировании для этого.

Установить шоколад

В действительности Windows не имеет собственного менеджера пакетов, который мы можем использовать для установки необходимых инструментов. Итак, первое, что мы сделаем, это установим шоколадку . Вы можете установить его, выполнив следующую команду в командной строке или Windows Powershell:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin" 

Теперь мы можем установить другие нужные нам инструменты, просто используя Chocolatey.

Установить Python

Python поставляется с инструментами командной строки, необходимыми для React Native:

 choco install -y python 2 

Установить JDK

JDK позволяет вашему компьютеру понимать и выполнять код Java. Обязательно установите JDK версии 8, поскольку это требуется для React Native:

 choco install jdk8 

Установить NVM

У узла есть установщик для Windows . Лучше использовать NVM для Windows, так как это позволит вам установить несколько версий Node, чтобы вы могли тестировать новые версии или использовать другую версию в зависимости от проекта, над которым вы сейчас работаете. Для этого вы можете использовать NVM для Windows. Скачайте nvm-setup.zip , распакуйте его и выполните nvm-setup.exe чтобы установить его.

Установить сторож

Watchman оптимизирует время компиляции вашего приложения React Native. Это необязательная установка, если вы не работаете над большим проектом. Вы можете найти инструкции по установке на их сайте .

Обновите переменные среды

Это последний шаг в настройке React Native в Windows. Здесь мы обновляем переменные среды, чтобы операционная система знала обо всех инструментах, необходимых для React Native. Выполните следующие действия непосредственно перед установкой React Native CLI.

1. Перейдите в Панель управления → Система и безопасность → Система . Оказавшись там, нажмите меню расширенных настроек системы слева.

   

2. Это откроет окно свойств системы. Нажмите кнопку Переменные среды :

   

3. В разделе « Пользовательские переменные » выделите переменную Path и нажмите кнопку редактирования .

4. На экране редактирования нажмите кнопку « Создать» и введите путь к Android SDK и инструментам платформы. Для меня это на C:\users\myUsername\AppData\Local\Android\Sdk и C:\users\myUsername\AppData\Local\Android\Sdk\platform-tools . Обратите внимание, что здесь вы также можете добавить путь к JDK, если он еще не добавлен:

   

Настройка в Linux

В этом разделе показано, как установить и настроить инструменты, необходимые для разработки приложений React Native в Linux. Я специально использовал Ubuntu 18.04 для тестирования, но вы должны иметь возможность переводить команды в дистрибутив Linux, который вы используете.

Установите необходимые инструменты

Первым шагом является установка следующих инструментов. Первая строка устанавливает инструменты, необходимые для Node, а вторая строка требуется для Watchman, который мы также установим позже:

 sudo apt-get install build-essential libssl-dev curl sudo apt-get install git autoconf automake python-dev 

Установить NVM

NVM позволяет нам устанавливать и использовать несколько версий Node. Вы можете установить его с помощью следующих команд:

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash source ~/.profile 

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

Установить JDK

Как было показано ранее, React Native фактически компилирует соответствующий код для каждой из платформ, на которых вы хотите развернуть. JDK позволяет вашему компьютеру понимать и выполнять код Java. Конкретной версией JDK, требуемой для React Native, является версия JDK 8 .

 sudo apt-get install openjdk-8-jre 

Установить сторож

Watchman — это инструмент для отслеживания изменений в файловой системе. Он в основном используется для ускорения процесса компиляции. Если вы включили предварительный просмотр в разрабатываемом приложении, изменения, внесенные в приложение, будут быстрее отражаться в предварительном просмотре. Следующие шаги требуют, чтобы Git уже был установлен в вашей системе:

 git clone https://github.com/facebook/watchman.git cd watchman git checkout v4.9.0 ./autogen.sh ./configure make sudo make install 

Вы можете столкнуться с проблемой, которая выглядит следующим образом:

  CXX scm/watchman-Mercurial.o scm/Mercurial.cpp: In constructor 'watchman::Mercurial::infoCache::infoCache(std::__cxx11::string)': scm/Mercurial.cpp:16:40: error: 'void* memset(void*, int, size_t)' clearing an object of non-trivial type 'struct watchman::FileInformation'; use assignment or value-initialization instead [-Werror=class-memaccess] memset(&dirstate, 0, sizeof(dirstate)); ^ In file included from scm/Mercurial.h:10, from scm/Mercurial.cpp:3: ./FileInformation.h:18:8: note: 'struct watchman::FileInformation' declared here struct FileInformation { ^~~~~~~~~~~~~~~ cc1plus: all warnings being treated as errors make: *** [Makefile:4446: scm/watchman-Mercurial.o] Error 1 

Попробуйте вместо этого следующую команду:

 ./configure --without-python --without-pcre --enable-lenient 

 sudo nano ~/.bash_profile 

 export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools 

 echo $HOME 

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

 brew update 

 brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8 

 brew install watchman 

 brew install nvm echo "source $(brew — prefix nvm)/nvm.sh" >> .bash_profile 

 sudo nano ~/.bash_profile 

 export ANDROID_HOME=/Users/$USER/Library/Android/sdk export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator 

 nvm install 11.2.0 nvm alias default 11.2.0 

 node --version npm --version 

 npm install -g expo-cli 

 xcrun simctl list 

  open -a Simulator --args -CurrentDeviceUDID "UUID" 

 chmod +x genymotion-<version>_<arch>.bin 

 ./genymotion-<version>_<arch>.bin 

 npm install -g react-native-cli 

 react-native init HelloWorldApp cd HelloWorldApp react-native run-android react-native run-ios 

 Could not find tools.jar. Please check that /usr/lib/jvm/java-8-openjdk-amd64 contains a valid JDK installation 

 sudo apt-get install openjdk-8-jdk 

 FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':app'. > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable. 

 echo $PATH 

 Android/sdk/tools Android/sdk/tools/bin Android/sdk/platform-tools 

 sudo nano ~/.bash_profile export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools 

 Found Xcode project TestProject.xcodeproj xcrun: error: unable to find utility "instruments", not a developer tool or in PATH 

 xcode-select --install 

 react-native init RNPokeSearch 

 expo init RNPokeSearch 

 yarn add pokemon axios 

 react-native run-android react-native run-ios 

 yarn start 

 import React from 'react'; import Main from './src/Main'; function App() { return <Main /> } export default App; 

 // src/Main.js import React, { Component } from 'react'; import { SafeAreaView, View, Text, TextInput, Button, Alert, StyleSheet, ActivityIndicator } from 'react-native'; 

 import axios from 'axios'; import pokemon from 'pokemon'; 

 import Pokemon from './components/Pokemon'; 

 const POKE_API_BASE_URL = "https://pokeapi.co/api/v2"; 

 export default class Main extends Component { state = { isLoading: false, // decides whether to show the activity indicator or not searchInput: '', // the currently input text name: '', // Pokemon name pic: '', // Pokemon image URL types: [], // Pokemon types array desc: '' // Pokemon description } // next: add render() method } 

 class Main extends Component { this.appTitle = "RNPokeSearch"; } 

 const POKE_API_BASE_URL = ''; class Main extends Component { } 

 render() { const { name, pic, types, desc, searchInput, isLoading } = this.state; // extract the Pokemon data from the state return ( <SafeAreaView style={styles.wrapper}> <View style={styles.container}> <View style={styles.headContainer}> <View style={styles.textInputContainer}> <TextInput style={styles.textInput} onChangeText={(searchInput) => this.setState({searchInput})} value={this.state.searchInput} placeholder={"Search Pokemon"} /> </View> <View style={styles.buttonContainer}> <Button onPress={this.searchPokemon} title="Search" color="#0064e1" /> </View> </View> <View style={styles.mainContainer}> { isLoading && <ActivityIndicator size="large" color="#0064e1" /> } { !isLoading && <Pokemon name={name} pic={pic} types={types} desc={desc} /> } </View> </View> </SafeAreaView> ); } 

 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 

 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 } }); 

 element: { property: value } 

 <TextInput style={styles.textInput} onChangeText={(searchInput) => this.setState({searchInput})} value={searchInput} placeholder={"Search Pokemon"} /> 

 <Button onPress={this.searchPokemon} title="Search" color="#0064e1" /> 

 render() { // ... } searchPokemon = async () => { try { const pokemonID = pokemon.getId(this.state.searchInput); // check if the entered Pokemon 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}/pokemon-species/${pokemonID}`); 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", "Pokemon not found"); } } 

 getTypes = (types) => { return types.map(({ slot, type }) => { return { "id": slot, "name": type.name } }); } 

 getDescription = (entries) => { return entries.find(item => item.language.name === 'en').flavor_text; } 

 // src/components/Pokemon.js import React from 'react'; import { View, Text, Image, FlatList, StyleSheet } from 'react-native'; const Pokemon = ({ name, pic, types, desc }) => { if (!name) { return null } return ( <View style={styles.mainDetails}> <Image source={{uri: pic}} style={styles.image} resizeMode={"contain"} /> <Text style={styles.mainText}>{name}</Text> <FlatList columnWrapperStyle={styles.types} data={types} numColumns={2} keyExtractor={(item) => item.id.toString()} renderItem={({item}) => { return ( <View style={[styles[item.name], styles.type]}> <Text style={styles.typeText}>{item.name}</Text> </View> ) }} /> <View style={styles.description}> <Text>{desc}</Text> </View> </View> ); } // 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; 

 const Pokemon = ({ name, pic, types, desc }) => { // .. } 

 <Image source={{uri: pic}} style={styles.image} resizeMode={"contain"} /> 

 <FlatList columnWrapperStyle={styles.types} data={types} numColumns={2} keyExtractor={(item) => item.id.toString()} renderItem={({item}) => { return ( <View style={[styles[item.name], styles.type]}> <Text style={styles.typeText}>{item.name}</Text> </View> ) }} /> 

 react-native run-android react-native run-ios yarn start