Прошло довольно много времени с тех пор, как response-native был впервые опубликован, хотя он еще не достиг версии 1, это довольно надежная платформа для создания приложений для Android и iOS с использованием только javascript.
Что такое React Native?
React Native позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, что позволяет создавать богатый мобильный пользовательский интерфейс с использованием декларативных компонентов.
Над чем мы будем работать в следующих двух статьях?
- Маршрутизация нашего приложения с помощью react-native navigation версии 2 от Wix
- Интеграция нашего собственного приложения React с redux и redux-saga
- Учимся использовать Vasern новую базу данных, созданную для React Native
- Работа с async apis
- Создание простой анимации с использованием RN’s Animated
- Связывание наших зависимостей с rnpm
Хорошо, первое, что нам нужно сделать, чтобы все заработало, - это настроить наш проект, вы можете либо клонировать этот репозиторий и перейти к следующей части, либо продолжать читать эту статью (я рекомендую вам продолжить чтение, если это вы впервые создаем приложение, работающее на реакцию).
учитывая, что у вас уже установлен react-native, нам нужно инициализировать наш проект. нам просто нужно запустить react-native init your-project-name. вы можете запустить свое приложение, просто используя команду react-native run-android.
давайте создадим папку с именем app, в которую мы поместим наш код, внутреннее приложение создаст следующие папки: actions, assets, components, reducer, sagas, store, screen.
после того, как вы подождете несколько секунд, наш проект будет готов к разработке, первое, что нам нужно, это установить наш требуемый пакет, нам нужно установить response-native-navigation, чтобы перемещаться по нашему приложению.
первый шаг: npm install --save react-native-navigation
Второй шаг: нам нужно связать родную библиотеку нашего пакета с нашим проектом, вы легко сделаете это, просто следуя руководству по установке.
Теперь перейдем к самой интересной части, нам нужно создать экран, чтобы отображать его с помощью нашего навигатора. давайте создадим файл, назовем его Home.js и поместим в папку экранов, вся магия будет происходить прямо внутри этого файла.
На следующей остановке нам нужно зарегистрировать наш компонент в навигаторе, чтобы он мог распознать наш компонент как экран. внутри папки экранов создайте файл с именем index.js.
именно так мы зарегистрировали наш первый экран. Теперь, когда все готово, пора запустить маршрутизатор. внутри папки приложения создайте файл App.js и поместите в него следующий код.
затем просто запустите приложение index.js в корне вашего проекта. теперь вы можете запустить свое приложение. если вы видите Hello World на своем экране, у вас все в порядке, если нет, вам нужно проверить, правильно ли вы выполнили все шаги.
Хорошо, для следующего шага мы собираемся подготовить наши данные. мы будем использовать Crypto Compare в качестве поставщика наших данных.
Причина, по которой мы собираемся использовать криптографическое сравнение, заключается в том, что он прост в использовании, их API-интерфейсы имеют отличную структуру и, что самое главное, бесплатны.
после регистрации вы получите бесплатный ключ API, с которым мы собираемся получать данные с серверов криптографического сравнения. перейдите на страницу документации, чтобы прочитать все об их API.
Мы собираемся использовать их API-интерфейс Multiple Symbols Full Data, чтобы узнать цены и обменный курс для пары криптовалют.
это первая часть, следующая часть будет содержать более сложную разработку, получение данных с сервера, рендеринг данных в наш компонент и т. д.
Найдите следующую часть по ссылке ниже.
