React Native: что это, как работает Bridge и JavaScript-среда

Что такое React Native

React Native — это фреймворк, созданный командой Facebook (ныне Meta) и выпущенный как open-source в 2015 году. В отличие от гибридных подходов (Cordova, Ionic), React Native не использует WebView. Вместо этого JavaScript-компоненты маппятся на нативные UI-элементы: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Первая версия React Native поддерживала только iOS. Android-поддержка появилась в 2016 году. Версия 0.60 (2019) ввела Autolinking — автоматическое подключение нативных зависимостей. React Native 0.68 (2022) включил новую архитектуру Fabric + TurboModules. Текущая стабильная версия 0.74 (2024) полностью переведена на архитектуру New Architecture с поддержкой Yoga 3.0 для Flexbox-вёрстки.

По данным Statista 2024, React Native используется в 38% кросс-платформенных проектов. Фреймворк применяют Discord, Instagram, Shopify, Pinterest, Skype и Uber Eats. Meta использует React Native в Facebook и Instagram — основном мобильном приложении с 2 миллиардами пользователей.

История и эволюция React Native

React Native был анонсирован на React.js Conf в январе 2015 года. Идея заключалась в переносе декларативной парадигмы React с веба на мобильные платформы. Первый коммит в репозитории появился в 2013 году как внутренний проект Facebook для создания приложения Facebook Groups на iOS.

Версия 0.70 (2022) представила Hermes как движок JavaScript по умолчанию. Hermes — это движок с предварительной компиляцией (AOT), оптимизированный для мобильных устройств. Он сокращает время запуска приложения на 50% и уменьшает размер APK на 30% по сравнению с JavaScriptCore. Hermes поддерживает ES6 и частично ES2020.

Отличие React Native от React Web

React Web рендерит компоненты в DOM-элементы (div, span, p) через ReactDOM. React Native рендерит в нативные компоненты платформы. Вместо <div> используется <View>, вместо <span> — <Text>. Стили задаются через объект StyleSheet.create(), который транслируется в CSS-свойства платформы. Flexbox включён по умолчанию через Yoga-движок.

Навигация в React Native отличается от веба. Вместо react-router-dom используется React Navigation — нативная библиотека с поддержкой Stack, Tab и Drawer навигаторов. React Navigation 6.x использует нативные анимации (useNativeDriver) и интеграцию с Deep Links. Для нативной навигации по экранам iOS UINavigationController и Android Fragment применяется библиотека react-native-navigation от Wix.

Архитектура React Native

Архитектура React Native традиционно строилась вокруг Bridge — асинхронного JSON-канала между JavaScript-средой и нативным кодом. С версии 0.68 Meta представила New Architecture, которая заменяет Bridge на JSI (JavaScript Interface) и Fabric. Рассмотрим обе модели.

Bridge и Fabric

Bridge — это сериализованный JSON-протокол, работающий в несколько потоков: JS Thread (интерпретация React-кода), Main Thread (UI) и Native Modules Thread (API). Каждое взаимодействие между JS и нативным кодом проходит сериализацию и десериализацию объектов, что создаёт задержки при частых вызовах. При скролле списка на 1000 элементов Bridge генерирует до 10 000 JSON-сообщений в секунду.

Fabric — новая система рендеринга в React Native. Вместо Bridge Fabric использует C++ теневой дерев (Shadow Tree), который синхронизируется с UI-потоком через JSI. Это устраняет сериализацию JSON: нативный C++-код напрямую вызывает функции в JavaScript-среде и наоборот. Fabric сокращает задержку рендеринга с 16 мс (Bridge) до 2–4 мс.

TurboModules — вторая часть New Architecture. В старой модели все нативные модули загружались при старте приложения. TurboModules загружают модули лениво (lazy loading) — только когда JS-код их впервые запрашивает. Это сокращает время холодного старта на 40% в приложениях с 20+ нативными модулями.

Пример приложения на React Native

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

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Нативные модули

Нативные модули — это механизм для вызова платформенных API из JavaScript. Если функциональность не покрыта стандартными компонентами React Native (камера, Bluetooth, биометрия), разработчик пишет модуль на Swift/Kotlin и регистрирует его через RCTBridgeModule или TurboModule. Нативная функция вызывается из JS через NativeModules.CameraModule.takePhoto().

React Native предоставляет готовые нативные модули для доступа к акселерометру (react-native-sensors), геолокации (@react-native-community/geolocation), биометрии (react-native-biometrics) и локальным уведомлениям (@notifee/react-native). Для кастомных сценариев Expo предлагает Expo Modules API — более простой интерфейс для создания нативных модулей без Xcode или Android Studio.

Преимущества React Native

Огромное сообщество — React Native имеет самое крупное сообщество среди кросс-платформенных фреймворков. На GitHub у проекта 117 000+ звёзд, 1800+ контрибьюторов. npm еженедельно скачивает react-native 3 млн+ раз. Вопросы по React Native занимают 5% всех вопросов на Stack Overflow в разделе мобильной разработки.

JavaScript-экосистема — разработчики React используют те же инструменты, что и в вебе: npm, Babel, ESLint, Prettier, Jest, TypeScript. Можно переиспользовать бизнес-логику между веб-версией (React) и мобильным приложением (React Native). Библиотеки Redux, Zustand, React Query, React Hook Form работают на обеих платформах без изменений.

Expo — это SDK и инструментарий, упрощающий разработку на React Native. Expo предоставляет готовые модули (камера, уведомления, карты, OAuth), облачные сборки (EAS Build) и обновления OTA (EAS Update). Expo Go позволяет запускать приложение на физическом устройстве без Xcode и Android Studio. По данным Expo 2024, 70% новых React Native-проектов используют Expo.

OTA-обновления — фича, доступная через Expo Update и CodePush (Microsoft). Разработчики могут отправлять обновления JavaScript-бандла напрямую пользователям без прохождения ревью App Store или Google Play. Это ускоряет исправление критических багов с 2–5 дней (ожидание ревью) до 1–2 часов.

TypeScript-поддержка включена по умолчанию с React Native 0.71. Шаблон проекта включает tsconfig.json, типы для всех компонентов и поддержку strict mode. Flow (статическая типизация от Facebook) также поддерживается, но Meta официально рекомендует TypeScript. TypeScript-шаблон составляет 85% новых проектов по данным опроса State of React Native 2024.

Экосистема и популярные библиотеки

npm — основной реестр пакетов для React Native. Поиск библиотек фильтруется по ключевому слову react-native. Для установки используется npm install или yarn add. React Native CLI автоматически линкует нативные зависимости (с версии 0.60). Для Expo-проектов установка управляется через expo install, который подбирает совместимую версию библиотеки.

Ключевые библиотеки

@react-navigation/native — стандарт де-факто для навигации в React Native. Библиотека включает Stack Navigator (анимированные переходы), Tab Navigator (нижнее меню для iOS/Android), Drawer Navigator (боковое меню) и Material Top Tab. React Navigation 7.x (2024) ввела статическую конфигурацию маршрутов и полную поддержку React 18 с useSyncExternalStore.

react-native-reanimated — библиотека для высокопроизводительных анимаций. Reanimated 3.x выполняет анимации в UI-потоке (worklet), минуя JS-поток. Это гарантирует 60 FPS даже при анимации 100+ элементов. useSharedValue, useAnimatedStyle и withSpring заменяют Animated API из стандартной поставки. Reanimated обрабатывает touch-жесты через react-native-gesture-handler.

@tanstack/react-query — библиотека для управления серверным состоянием. React Query кэширует ответы API, автоматически перезапрашивает данные при изменении сети (refetchOnReconnect) и поддерживает пагинацию с useInfiniteQuery. Версия 5.x включает оптимистичные обновления для UX — интерфейс обновляется до получения ответа сервера, а затем корректируется.