Что такое React Native и как он работает

Коротко о React Native

React Native — открытый фреймворк от Meta для создания мобильных приложений под iOS и Android из одной кодовой базы. Код пишется на JavaScript или, что сейчас стандарт, на TypeScript, с использованием подходов React: компоненты, состояние, хуки.

Главное отличие от веб-обертки: React Native не показывает веб-страницу внутри приложения. Он создает настоящие нативные элементы интерфейса — те же, что использовали бы Swift- и Kotlin-разработчики.

Как JavaScript управляет нативным интерфейсом

Упрощенно приложение состоит из двух частей:

1. JavaScript-часть — ваша логика и описание интерфейса. Она выполняется встроенным в приложение JS-движком.
2. Нативная часть — реальные экраны, кнопки, списки и доступ к функциям устройства.

Вы описываете интерфейс компонентами:

import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ padding: 24 }}>
      <Text>Count: {count}</Text>
      <Pressable onPress={() => setCount(count + 1)}>
        <Text>Add</Text>
      </Pressable>
    </View>
  );
}

Когда состояние меняется, React вычисляет, что именно изменилось, и React Native обновляет соответствующие нативные элементы. View превращается в нативный контейнер, Text — в нативный текстовый элемент.

В современной архитектуре React Native JavaScript общается с нативным кодом напрямую, без медленной асинхронной «прослойки» прошлых версий. Это сделало интерфейс отзывчивее и упростило написание нативных модулей.

Роль Expo

Expo — набор инструментов и сервисов поверх React Native. Официальная документация React Native рекомендует начинать новые проекты именно с фреймворка вроде Expo.

Что дает Expo:

• быстрый старт без ручной настройки Xcode и Android Studio на первых шагах;
• готовые модули для камеры, уведомлений, файлов, геолокации и других функций;
• файловую маршрутизацию экранов (Expo Router);
• облачные сборки и отправку в сторы (EAS);
• обновления «по воздуху» для JavaScript-части без повторной публикации — в рамках правил сторов.

Создать проект можно одной командой:

npx create-expo-app@latest my-app

При этом Expo не ограничивает: если нужен свой нативный код, его можно добавить в проект.

Общий код с веб-командой на React

Это одна из главных причин выбрать React Native.

Что обычно получается переиспользовать:

• типы и модели данных на TypeScript;
• клиент для API, валидацию, бизнес-логику;
• управление состоянием и работу с запросами;
• знания команды: подходы, инструменты, код-ревью.

Что нельзя перенести напрямую: веб-разметку. В вебе используются div и CSS, в React Native — View, Text и стили в JavaScript. Общие UI-компоненты возможны, но требуют отдельной архитектуры.

Удобная схема — монорепозиторий, где веб, мобильное приложение и общий пакет с логикой живут рядом.

Сильные стороны

• Огромная экосистема JavaScript и React.
• Легче найти и обучить разработчиков, особенно из веба.
• Нативные компоненты: приложение ощущается «родным» на каждой платформе.
• Быстрая итерация: изменения видны почти сразу (Fast Refresh).
• Обновления JavaScript-части без ожидания ревью сторов.

Слабые стороны

• Качество сторонних библиотек очень разное; заброшенный пакет может блокировать обновления.
• Обновление версий фреймворка в больших проектах требует времени и тестирования.
• Тяжелые сценарии — сложные анимации, обработка видео, AR — требуют специальных библиотек или нативного кода.
• Различия iOS и Android в нативных компонентах нужно проверять на обеих платформах.
• Веб-опыт не равен мобильному: публикация, производительность и работа с устройством требуют отдельных знаний.