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 от мрежата към мобилните платформи. Първият commit в репозиториума се появи през 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 ms (Bridge) на 2–4 ms.

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 обработва жестовете на допиране чрез react-native-gesture-handler.

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