Настройка проекта React Native

Я подумал, что поделюсь своим процессом настройки простого проекта React Native Project, поскольку я недавно делал это, работая над проектами приложений для хобби. Это во многом похоже на собственное руководство Facebook (только немного короче).

Что такое React Native?

React Native — это, по сути, фреймворк, который позволяет создавать нативные приложения для iOS и Android с использованием Javascript, и это здорово. Вместо того, чтобы изучать Objective-C/Swift и Java, теперь вы можете создать мобильное приложение, используя только Javascript.

Настройка iOS

Прежде всего, я работаю на Mac, поэтому все примеры применимы только к вам, если вы также используете Mac. Настроить проект под iOS невероятно легко и просто. Чтобы продолжить, вам понадобится Xcode (версия 8 или выше), Node (версия 4 или выше), Watchmen и React Native CLI. На этом этапе вы захотите открыть терминал. Теперь, используя Homebrew, мы можем легко установить Node и Watchmen с помощью следующих команд.

$ brew install node
$ brew install watchmen

Как только это будет сделано, установите React Native CLI с помощью следующей команды.

$ npm install -g react-native-cli

Далее вам нужно будет установить Xcode, что лучше всего сделать через App Store.

Далее мы собираемся инициализировать скелет проекта React Native и открыть это приложение на виртуальном устройстве iOS.

$ react-native init MyProject
$ cd MyProject
$ react-native run-ios

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

Теперь вы готовы строить вещи! Как подсказывает подсказка, вы можете перейти к index.ios.js, чтобы начать играть и редактировать вещи.

Настройка Android

Все почти то же самое, однако есть несколько дополнительных вещей, которые вам нужно сделать, если вы хотите начать разработку с Android.

Сначала вам нужно скачать JDK (Java Development Kit), а затем загрузить Android Studio (в основном Xcode, но для Android). Если у вас есть какие-либо проблемы, они предоставили руководство по установке здесь.

При первом запуске Android Studio убедитесь, что отмечены следующие элементы, когда вас спросят, что вы хотите включить в установку.

SDK для Android
Платформа Android SDK
Производительность (Intel HAXM)
Виртуальное устройство Android

Кроме того, вам необходимо убедиться, что установлен Android 6 (Marshmallow). Для этого нажмите кнопку «Настроить» на странице приветствия, а затем запустите диспетчер SDK. Отсюда выберите Android 6 (Marshmallow) и убедитесь, что отмечены следующие элементы.

API Google
Android SDK Platform 23
Образ системы Intel x86 Atom_64
Образ системы Intel x86 Atom_64 API Google

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

Далее вам нужно настроить некоторые переменные среды, чтобы все работало правильно. Вы можете открыть файл .profile в текстовом редакторе и добавить следующие строки или просто ввести их прямо в терминал и нажать Enter. Принимая во внимание, что последний будет хранить их только до тех пор, пока эта вкладка открыта, после закрытия она забудет эти переменные, поэтому лучше всего отредактировать файл .profile.

$ export ANDROID_HOME=${HOME}/Library/Android/sdk
$ export PATH=${PATH}:${ANDROID_HOME}/tools
$ export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Если для вас все так же, как и для меня, вам может потребоваться вручную настроить виртуальное устройство с помощью AVD. Это можно сделать, следуя данному руководству.

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

$ react-native run-android

Если у вас есть Android-устройство, вы можете подключить его, включить отладку по USB, ввести указанную выше команду, и оно загрузит приложение на вашем устройстве, что еще круче!

Отсюда вы можете начать создавать свое приложение и экспериментировать с React Native. Удивительно то, что всякий раз, когда вы вносите какие-либо изменения, вам просто нужно перезагрузить приложение (что очень быстро), и эти изменения отражаются практически мгновенно. Это делает разработку мобильных приложений такой быстрой и легкой.

Спасибо за чтение, нажмите 💚, если вам понравилось, и обязательно подпишитесь, если хотите быть в курсе того, над чем я работаю.

Настройка проекта React Native