Ваше первое приложение на React Native и NativeBase

No bullshit getting started guide ™

Published in

Sibdev

4 min readNov 13, 2017

Когда я решил потыкаться в React Native, не имея практически никакого опыта в мобильной разработке, я столкнулся с тем, что официальный туториал React Native пытается нас научить основам реакта.

Если же вы уже знакомы с React и хотите попробовать React Native — вам сюда.

Так как я считаю, что для обучения лучше сначала склепать что-нибудь из готовых компонентов, а потом, когда появится необходимость — углубляться в документацию и тонкости работы, сейчас мы с вами сделаем вот что:

Поставим React Native
Создадим пустое приложение
Запустим его на живом девайсе
Подключим NativeBase
Добавим немного логики к нашему пустому приложению

Начнем:

Ставим React Native

Тут всё относительно просто, открываем наш любимый терминал и пишем npm install -g react-native-cli

(Предварительно нужно установить node.js)

Создаем пустое приложение

Тут тоже всё весьма тривиально:

react-native init имяприложения

Запускаем на живом девайсе

И вот начинается самая интересная часть. Прежде всего, нам нужно запустить packager:

yarn start

Packager — это сервер, который собирает js-часть нашего приложения. Его нужно перезапускать при каждой установке нового npm-пакета.

Затем, подключаем наш девайс к компьютеру в режиме разработки, а так же к одной wifi-сети с компьютером, и открываем один из проектов (папки ios и android) в подходящей среде: для ios нам понадобится xcode (и, соответственно, мак), для android — Android Studio

Я буду смотреть приложение под iOS, так как в основном пользуюсь именно ей:

Открываем проект в xcode, выбираем подключенный девайс (или эмулятор). Если вы хотите запускать приложение еще и на айпадах, зайдите в настройки проекта, раздел General, и там, в выпадашке Devices (вкладка Deployment Info), выберите пункт Universal.

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

Скорее всего, сборка каждый раз будет выдавать то одну, то другую ошибку. Это обязательные шаги, которые нужно пройти для каждого приложения под iOS, просто следуйте инструкциям xcode.

Так же, на самом устройстве может понадобиться зайти в Основные -> Управление устройством, и одобрить наш сертификат разработчика

После запуска мы увидим что-то вроде этого:

Встряхнем наш планшет для доступа к дев-меню:

Нам сейчас будут интересны здесь два пункта:

Enable Live Reload и Enable Hot Reloading

Разница между ними в том, что Live Reload перезагружает приложение полностью, с возвратом к изначальному состоянию, а Hot Reloading только меняет отдельные компоненты.

Закроем дев-меню и приложение, и…

Давайте поставим NativeBase

Сам по себе React Native поставляется с некоторым набором стандартных компонентов. О них вы можете почитать в документации и, в большинстве своем, они оборачивают нативные контролы iOS и Android.

Мы же поставим сторонний UI-кит под названием NativeBase, который упрощает написание многих “стандартных” вещей.

Установим пакет NativeBase:

yarn add native-base

Затем, сделаем “link”:

react-native link

Linking добавляет нативные зависимости в наши ios/android-проекты.

Затем, заново устанавлием пакеты и перезапускаем packager.

Теперь открываем его в xcode и пересоберем/перезапустим на устройстве.

Не забываем запустить packager (react-native start). Если в девменю у вас не доступен Hot Reloading / Live Reloading — перезапустите приложение при запущенном packager’е

Добавляем красивостей и функциональностей

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

Начнем с красивостей:

Сделаем приложение с “топбаром”, большим текстом, отображающим текущее число и двумя кнопками: “больше” и “меньше”

Посмотреть на все компоненты NativeBase можно здесь: https://docs.nativebase.io/Components.html#Components

И так, сотрем всё из App.js и напишем заново: