React Native — это фреймворк для разработки мобильных приложений, созданный Facebook (Meta). Он позволяет разрабатывать кроссплатформенные приложения на языке JavaScript, которые будут работать как на iOS, так и на Android. Главная особенность заключается в том, что React Native использует нативные компоненты платформы, что делает приложения быстрыми, отзывчивыми и визуально неотличимыми от написанных на Swift или Kotlin.

Почему стоит выбрать React Native?

• Кроссплатформенность: Написав код один раз, вы получаете два приложения: для Android и iOS. Это экономит время и ресурсы.
• Простота в изучении: Если вы знакомы с React.js или JavaScript, то в React Native будет так же — всё знакомо и понятно.
• Быстрое прототипирование: Благодаря горячей перезагрузке (Hot Reload) вы видите изменения в коде практически мгновенно.
• Поддержка сообщества и модулей: У React Native огромное сообщество, множество готовых библиотек и модулей. Надо добавить карту? Есть библиотека. Хотите использовать камеру? И для этого есть модуль.
• Поддержка крупных компаний: React Native используется такими гигантами, как Instagram, Airbnb, Uber Eats, Discord и другими. Если эти компании доверяют фреймворку, то почему бы и вам не попробовать?

Чем React Native отличается от других фреймворков?

Flutter vs React Native

Flutter от Google тоже популярен. Главное отличие: Flutter использует язык Dart и отрисовывает интерфейс сам, а React Native опирается на нативные компоненты системы. Итог? React Native легче интегрировать с существующими проектами.

NativeScript и Xamarin

NativeScript и Xamarin также кроссплатформенные, но React Native выигрывает в гибкости и популярности. Чем популярнее фреймворк, тем больше у него готовых решений и библиотек.

Примеры успешных приложений на React Native

• Instagram: Части приложения Instagram, включая раздел для редактирования профиля, реализованы на React Native.
• Uber Eats: Uber Eats использует React Native для интерфейсов доставки и взаимодействия с пользователями.
• Airbnb (раньше): Хотя Airbnb уже отказались от React Native, они доказали, что этот фреймворк может масштабироваться для огромных проектов.
• Discord: React Native помогает поддерживать мобильное приложение для миллионов пользователей.

Практика

Поговорим о том, как начать с React Native. Мы установим окружение и создадим первое приложение.

Шаг 1: Установка окружения

Установите Node.js

React Native требует Node.js. Скачайте его с официального сайта и установите.

Установите Expo CLI

Expo — это удобный инструмент, который упрощает разработку. Для установки выполните команду в терминале:

npm install -g expo-cli

Установите редактор кода

Для разработки лучше всего подойдёт VS Code. Скачайте его с официального сайта.

Установите приложение Expo Go на телефон

Expo Go позволяет запускать ваше приложение на телефоне без необходимости его сборки.

Шаг 2: Создание первого приложения

Откройте терминал и создайте новый проект:

expo init HelloReactNativeApp

Выберите шаблон blank и дождитесь завершения установки.

Перейдите в папку проекта:

cd HelloReactNativeApp

Запустите проект:

npm start

Шаг 3: Запуск приложения

На экране терминала вы увидите QR-код. Откройте приложение Expo Go на вашем телефоне и отсканируйте QR-код. Ваше приложение запустится на телефоне! Если всё прошло успешно, вы увидите экран с надписью «Open up App.js to start working on your app!»

Шаг 4: Добавим «Hello, React Native!»

Откройте файл App.js в вашем проекте. Измените содержимое на следующее:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

Сохраните изменения, и вы увидите на экране телефона текст «Hello, React Native!» на светлом фоне.

Этот код — простое приложение на React Native, которое отображает текст «Hello, React Native!» по центру экрана.

App — компонент, который использует View для контейнера и Text для текста.

Стили определяются с помощью StyleSheet.create, где:

• container центрирует содержимое и задает фон.
• text задает размер и цвет шрифта.