Если вы фронтенд-разработчик и имеете опыт работы с react + redux, вам обязательно стоит обратить внимание на такой интересный инструмент, как react-native. Он позволяет разрабатывать кроссплатформенные приложения для iOS и Android. В настоящее время React-native находится в стадии активной разработки и выпускает обновления каждый месяц.
Год назад у меня возникло желание опробовать эту технологию и я начал писать приложение-словарь, позволяющее сохранять категорию английских слов с их переводом. Версия react-native была 0.37, когда я начал реализацию своего проекта, а сейчас она 0.57. Несколько недель назад я решил продолжить разработку и у меня возникла стандартная проблема быстрорастущих проектов, вроде довольно частой смены функциональности. Мне пришлось реорганизовать несколько вещей в моем коде, чтобы запустить приложение. Я огорчился, но потом понял, что эти изменения ускоряют и повышают качество разработки приложений. Теперь я хочу рассказать вам об основных моментах разработки приложений, с которыми я столкнулся.
Вы можете создать новое приложение двумя способами: create-react-native-app и response-native init. Create-react-native-app - это пакет npm, который позволяет создавать структуру приложения с нуля и запускать его на устройстве без установки среды для каждой платформы (IOS и Android). Однако, если вам нужно добавить собственный код платформы в приложение или добавить некоторую библиотеку, которая делает это, вам все равно следует установить среду.
Теперь у вас есть проект, и что делать дальше? У вас нет CSS или HTML, но есть синтаксис jsx и CSS inline. React-native использует принцип flexbox, как и в WEB для стилизации компонентов. В react-native нет обычных HTML-элементов, но есть компоненты react-native, описание которых можно найти на официальном сайте. Он имеет кроссплатформенные (View, Button, TextInput) и платформенно-зависимые (DatePickerIOS, ProgressBarAndroid) компоненты. Давайте рассмотрим разработку компонента, создав карточку для отображения категории слов.
Ниже приведена разметка jsx для этого компонента.
Компонент просмотра похож на div в Интернете и является одним из самых важных для создания компонентов. TouchableNativeFeedback - это компонент, который позволяет обрабатывать нажатие на встроенный в него элемент. ColoredFlatButton и Icon - это компоненты из библиотеки react-native-material-kit. Как видно из приведенного выше примера, сборка компонентов в react-native не отличается от сборки компонентов в react, за исключением того, что вместо HTML-элементов используются элементы из react-native. Далее мы рассмотрим стили этого компонента.
Вам нужно импортировать класс StyleSheet из react-native и передать туда объект стилей. А затем вы можете указать атрибут компонента «стиль».
Я думаю, что мы не будем подробно рассматривать синтаксис стилей, потому что он понятен человеку, знакомому с css. Единственное отличие состоит в том, что размеры указаны в Пикселях, не зависящих от плотности. Это единицы, которые позволяют приложению выглядеть одинаково на разных экранах и разрешениях в iOS и Android.
Теперь нам следует подумать о переходе между страницами после того, как в приложении появляется более одной страницы. До недавнего времени добавить навигацию в приложение было довольно сложно. Я приведу пример того, как это можно было сделать раньше.
Согласитесь со мной, это не очень хорошо выглядит? Сейчас ситуация изменилась, появилось несколько пакетов, рекомендуемых в документации (native-navigation, react-native-navigation, react-navigation). Я использовал react-navigation. Получилось довольно просто, достаточно импортировать навигатор и указать настройки.
Первый параметр - это маршруты приложений, также мы можем указать настройки для заголовка каждой страницы. Второй параметр - это настройки для компонента «Ящик». Компонент ящика - это меню с левой стороны, которое открывается после щелчка по значку гамбургера. Возможна интеграция с redux.
После появления навигации и нескольких экранов стоит задуматься о сохранении данных. Мы можем хранить данные на устройстве, если не пользуемся Интернетом. Для этого у нас есть SQLite. Я использовал пакет response-native-sqlite-storage. Немного заморачивался с установкой, и проблема была очевидна, мне пришлось переустановить приложение на устройстве после установки этого пакета. Я использовал метод, при котором у вас уже есть база данных в проекте, которая используется при установке приложения на устройство. Вам нужна только одна линия для установления соединения.
А также простой пример запроса к базе данных.
В заключение могу сказать, что после использования react-native я остался доволен этой технологией. Имеет удобную отладку в браузере, ничем не отличается от отладки веб-приложений. Вы всегда можете найти пакет в сообществе react-native, если какой-либо функциональности не существует.
