react-native учебник
Начало работы с реакцией

замечания

Настройка для Mac

Установка менеджера пакетов Homebrew brew

Вставьте это в приглашении терминала.

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

Установка Xcode IDE

Загрузите его, используя ссылку ниже, или найдите ее в Mac App Store

https://developer.apple.com/download/

ПРИМЕЧАНИЕ. Если у вас установлен Xcode-beta.app вместе с производственной версией Xcode.app , убедитесь, что вы используете производственную версию инструмента xcodebuild . Вы можете установить его с помощью:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Установка среды Android

• Git git

  * Если вы установили XCode, Git уже установлен, в противном случае выполните следующие

  brew install git 
  

• Последние JDK

• Android Studio

  Выберите пользовательскую установку

  

  Выберите как Performance, так и Android Virtual Device

  

  После установки выберите Configure -> SDK Manager из окна приветствия Android Studio.

  

  В окне «Платформы SDK» выберите «Показать сведения о пакете» и под Android 6.0 (Marshmallow), убедитесь, что установлены API Google, Intel X86 Atom Image, Intel x86 Atom_64 System Image и Google API. Системное изображение Intel x86 Atom_64.

  

  В окне «Инструменты SDK» выберите «Показать сведения о пакете» и в «Инструментах сборки Android SDK», убедитесь, что выбран Android SDK Build-Tools 23.0.1.

  

• Переменная среды ANDROID_HOME

  Убедитесь, что переменная окружения ANDROID_HOME указывает на существующий Android SDK. Для этого добавьте это в свой файл ~ / .bashrc, ~ / .bash_profile (или независимо от того, что использует ваша оболочка) и заново откройте свой терминал:

  Если вы установили SDK без Android Studio, это может быть что-то вроде: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Зависимости для Mac

Вам понадобится Xcode для iOS и Android Studio для Android, node.js, инструментов командной строки React Native и Watchman.

Мы рекомендуем устанавливать узел и сторож через Homebrew.

brew install node
brew install watchman

Watchman - это инструмент Facebook для просмотра изменений в файловой системе. Настоятельно рекомендуется установить его для повышения производительности. Это необязательно.

Узел имеет номер npm, который позволяет установить интерфейс командной строки React Native.

npm install -g react-native-cli

Если вы получаете ошибку разрешения, попробуйте с sudo:

sudo npm install -g react-native-cli.

Для iOS самый простой способ установить Xcode - через Mac App Store. И для Android скачать и установить Android Studio.

Если вы планируете вносить изменения в код Java, мы рекомендуем Gradle Daemon, который ускоряет сборку.

Тестирование вашей реальной установки

Используйте инструменты командной строки React Native для создания нового проекта React Native под названием «AwesomeProject», а затем запустите run-ios для реагирования внутри вновь созданной папки.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Скоро вы увидите новое приложение, работающее в iOS Simulator. response-native run-ios - это всего лишь один из способов запуска вашего приложения - вы также можете запускать его непосредственно из Xcode или Nuclide.

Изменение вашего приложения

Теперь, когда вы успешно запустили приложение, давайте его модифицируем.

• Откройте index.ios.js или index.android.js в выбранном текстовом редакторе и отредактируйте некоторые строки.
• Hit Command⌘ + R в вашем симуляторе iOS для перезагрузки приложения и просмотра изменений! Это оно!

Поздравляем! Вы успешно выполнили и изменили свое первое приложение React Native.

_{источник: Начало работы - React-Native}

Настройка для Windows

Примечание. Вы не можете разрабатывать приложения для работы с приложениями для iOS для Windows, а только для приложений с поддержкой Android.

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

Инструменты / Окружающая среда

• Windows 10
• инструмента командной строки (например, командной строки Powershell или Windows)
• Chocolatey ( шаги по настройке через PowerShell )
• JDK (версия 8)
• Android Studio
• Intel-машина с технологией виртуализации включена для HAXM (необязательно, требуется только, если вы хотите использовать эмулятор)

1) Настройте свою машину для реагирования на собственное развитие

Запустите командную строку в качестве администратора, выполнив следующие команды:

choco install nodejs.install
choco install python2

Перезапустите командную строку в качестве администратора, чтобы вы могли запускать npm

npm install -g react-native-cli

После запуска последней копии команды был установлен каталог, в котором установлен response-native. Это необходимо для шага 4. Я попробовал это на двух компьютерах в одном случае: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . В другом это было: C:\Users\admin\AppData\Roaming\npm

2) Установите переменные окружения

Пошаговое руководство с изображениями можно найти здесь для этого раздела.

Откройте окно «Переменные среды», перейдя к:

[Правой кнопкой мыши] Меню «Пуск» -> Система -> Дополнительные параметры системы -> Переменные среды

В нижней части найдите «Системную переменную« Путь »и добавьте местоположение, на которое установлено действие response-native, в шаге 1.

Если вы не добавили переменную окружения ANDROID_HOME, вам тоже придется это сделать. Пока в окне «Переменные среды» добавьте новую Системную переменную с именем «ANDROID_HOME» и значение в качестве пути к вашему sdk для Android.

Затем перезапустите командную строку в качестве администратора, чтобы вы могли запускать в ней команды реакции-native.

3) Создайте свой проект. В командной строке перейдите в папку, в которую вы хотите разместить проект, и выполните следующую команду:

react-native init ProjectName

4) Запустите проект Запустите эмулятор из студии Android. Перейдите в корневую директорию вашего проекта в командной строке и запустите ее:

cd ProjectName
react-native run-android

Вы можете столкнуться с проблемами зависимостей. Например, может возникнуть ошибка, когда у вас нет правильной версии инструмента сборки. Чтобы исправить это, вам нужно будет открыть диспетчер sdk в Android Studio и загрузить инструменты сборки.

Congrats!

Чтобы обновить ui, вы можете дважды нажать клавишу r в эмуляторе и запустить приложение. Чтобы просмотреть параметры разработчика, вы можете нажать ctrl + m .

Настройка для Linux (Ubuntu)

1) Setup Node.JS

Запустите терминал и запустите следующие команды для установки nodeJS:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Если команда узла недоступна

sudo ln -s /usr/bin/nodejs /usr/bin/node

Альтернативы Установки NodeJS:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

или же

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

проверьте, есть ли у вас текущая версия

node -v 

Запустите npm, чтобы установить

sudo npm install -g react-native-cli

2) Настройка Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Настройка Android Studio:

Android SDK или Android Studio

http://developer.android.com/sdk/index.html

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) Эмулятор настройки:

На терминале выполните команду

android

Выберите «SDK Platforms» из диспетчера SDK, и вы увидите голубую галочку рядом с «Android 7.0 (нуга)». Если это не так, установите флажок, а затем «Применить».

5) Начать проект

Пример приложения init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: Всегда проверяйте, android/app/build.gradle ли версия на android/app/build.gradle с инструментами Build Tools, загруженными на вашем SDK Android.

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) Запустить проект

Откройте Android AVD, чтобы настроить виртуальный Android. Выполните командную строку:

android avd

Следуйте инструкциям по созданию виртуального устройства и запустите его

Откройте другой терминал и запустите командные строки:

react-native run-android
react-native start