React Native после React. Легкий?

Некоторое время назад я написал приложение для пользователей Android/iOS. Как разработчик React, я выбрал React Native. Вот лишь несколько моих мыслей об этом и о том, как вы можете начать создавать собственное приложение прямо сейчас.

Начать

Прежде всего, мы должны инициализировать ваше приложение. Мы будем использовать Экспо.

Экспо — это фреймворк и платформа для универсальных React-приложений. Это набор инструментов и сервисов, созданных на основе React Native и нативных платформ, которые помогают разрабатывать, создавать, развертывать и быстро выполнять итерации для iOS, Android и веб-приложений на основе одной кодовой базы JavaScript/TypeScript.

Expo предоставит вам живую перезагрузку, а также различные API, которые значительно ускорят процесс разработки.

Запустите npm install — global expo-cli и сразу после этого expo init my-app.
Эти команды установят Expo CLI и инициализируют ваш первый выставочный проект. Если вы хотите разрабатывать на своем собственном устройстве, вы можете легко загрузить приложение Expo из Google Play или AppStore (в зависимости от вашей платформы). В противном случае обязательно установите Android Studio и настройте эмулятор Android.

Первый взгляд

Запустите npm start, и откроется новое окно браузера. В левой части экрана выберите один из вариантов.

Давайте взглянем на шаблонный код, созданный для нас Expo CLI.

У React-разработчика могут возникнуть вопросы: что такое компоненты «View» и «Text» и почему нет «div» и других тегов HTML? Чтобы ответить на оба вопроса, мы должны понять одну простую, но очень важную вещь: в React Native нет HTML-тегов и файлов CSS. Вместо этого вы используете компонент «Вид» для своего контейнера (представьте его как простой «div» в HTML) и «Текст» для отображения текста внутри него. Обратите внимание, что каждый текст должен быть заключен в компонент ‹Text›.

Важно знать, что компонент View может быть легко вложен в другой компонент View.

Стиль

Как видно из приведенного выше кода, в вашем компоненте App.js есть объект styles. Давайте быстро посмотрим.

Прежде всего, мы видим, что наш объект styles создается с помощью StyleSheet. Это способ создания стилей в React Native. По умолчанию React Native использует Flexbox для стилизации компонентов. Они довольно просты и похожи на React. Чтобы применить ваши стили, мы должны сделать следующее:

...
<View style={styles.container}>
...
</View>

Таким образом, представление будет отображаться в соответствии со стилями, указанными в объекте контейнер. Но есть и другой способ стилизовать ваш компонент: встроенный стиль.

<View style={{
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }}>
  ...
  </View>

Обратите внимание, что это не рекомендуется способ стилизации просто потому, что он ухудшает читабельность кода. Надеюсь, вы знаете это из своего опыта работы с React.

Время практики

Пришло время увидеть React Native в действии. Чтобы упростить задачу для начинающих, давайте реализуем простую систему навигации. Окончательный результат будет таким:

Чтобы создать такое приложение, мы должны знать, что такое состояние в React. Взгляните здесь для быстрого обновления. Давайте определим наше состояние:

import React, { useState } from 'react'; 
...
const [isWelcomePageOpened, setWelcomePageOpened] = useState(true);

Просто, верно? Ничего нового для React-разработчика. Мы определяем состояние isWelcomePageOpened, чтобы увидеть, должна ли страница приветствия отображаться прямо сейчас. Теперь давайте определим стиль, который мы будем использовать для этого приложения.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 150,
    height: 50
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  button: {
    marginTop: 50
  }
});

Как видите, я определил стили для кнопки, изображения и текста. Стиль для нашего контейнера остается прежним.
Я хочу рассказать, как мы можем добавлять изображения в наши проекты, потому что это немного отличается от React. Прежде всего, импортируйте изображение из пакета «react-native».

import { ..., Image } from 'react-native';

Теперь давайте добавим наше первое изображение. Основное использование:

<Image
  source={ { uri: 'YOUR_IMAGE_URI' } }
  style={ styles.image }/>
<Image/>

Пришло время замедлиться и обсудить это. Изображение имеет свойство source, что выглядит довольно странно. Мы указываем здесь URI для нашего изображения. Это может быть, например, изображение с вашего сервера. Если мы хотим получить образ из корня нашего проекта, обязательно делаем следующее:

<Image source={ require('./image.png') } style={ styles.image }/>

Сейчас это выглядит немного иначе. Вместо того, чтобы передавать объект с URI, нам требуется изображение из папки нашего проекта.
Давайте добавим простую кнопку.

import { Button, ...} from 'react-native';

Как видите, нам не нужно реализовывать собственную кнопку, потому что она есть в пакете «react-native». Самое классное в этом то, что кнопка будет выглядеть по-разному в зависимости от вашей системы. Давайте использовать его сейчас:

<Button
  title={ 'Navigate to another page' }
  style={ styles.button }
  onPress={ () => setWelcomePageOpened(!isWelcomePageOpened) }
/>

Здесь нужно объяснить только свойство onPress. В React и чистом JS у нас есть свойство onClick/onclick, но в React Native у нас есть onPress. Как обычно, это получит обратный вызов, который может легко изменить наше состояние. Теперь у нас есть переключатель состояния, и легко отобразить что-то на странице. Полный код вы найдете ниже.

Заключение

Мы создали наше самое первое приложение с React Native. Как видите, разработчику React очень легко начать создавать приложение прямо сейчас. React Native — отличный способ создавать приложения для Android и iOS, если вы являетесь разработчиком JS. Единственное, что не нравится, в основном связано с библиотекой Expo: сервер часто отключается, и разработчику приходится тратить время на перезагрузку.
Удачи!