React Native: mi ez, hogyan működik a Bridge és a JavaScript környezet

Mi az a React Native

React Native — egy keretrendszer, amelyet a Facebook (ma Meta) csapata készített és 2015-ben nyílt forráskódként adott ki. A hibrid megközelítésektől (Cordova, Ionic) eltérően a React Native nem használ WebView-t. Ehelyett a JavaScript komponensek natív UI elemekre képeződnek le: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

A React Native első verziója csak az iOS-t támogatta. Az Android támogatás 2016-ban került hozzáadásra. A 0.60-as verzió (2019) bevezette az Autolinkinget — a natív függőségek automatikus csatlakoztatását. A React Native 0.68 (2022) hozzáadta az új Fabric + TurboModules architektúrát. A jelenlegi stabil verzió 0.74 (2024) teljesen átkerült a New Architecture-re Yoga 3.0 támogatással a Flexbox elrendezéshez.

A Statista 2024 szerint a React Native-t a cross-platform projektek 38%-ában használják. A keretrendszert használja a Discord, Instagram, Shopify, Pinterest, Skype és az Uber Eats. A Meta a React Native-t használja a Facebookban és az Instagramban — a fő mobilalkalmazásban 2 milliárd felhasználóval.

A React Native története és fejlődése

React Native bejelentésre került a React.js Conf-on 2015 januárjában. Az ötlet az volt, hogy a React deklaratív paradigmáját átültetik a webről a mobil platformokra. Az első commit a tárban 2013-ban jelent meg, mint a Facebook belső projektje az iOS Facebook Groups alkalmazás létrehozására.

A 0.70 verzió (2022) bevezette a Hermes-t alapértelmezett JavaScript motorént. A Hermes egy előfordítással (AOT) rendelkező motor, amely mobil eszközökre van optimalizálva. 50%-kal csökkenti az alkalmazás indulási idejét és 30%-kal az APK méretét a JavaScriptCore-hoz képest. A Hermes támogatja az ES6-ot és részben az ES2020-at.

Különbség a React Native és a React Web között

React Web a komponenseket DOM elemekbe (div, span, p) rendereli a ReactDOM-on keresztül. A React Native a platform natív komponenseibe renderel. A <div> helyett <View>-t, a <span> helyett <Text>-et használnak. A stílusokat a StyleSheet.create() objektumon keresztül állítják be, amely a platform CSS tulajdonságaira fordítódik. A Flexbox alapértelmezés szerint be van kapcsolva a Yoga motoron keresztül.

Navigáció a React Native-ben eltér a webtől. A react-router-dom helyett a React Navigation-t használják — egy natív könyvtárat Stack, Tab és Drawer navigátorok támogatásával. A React Navigation 6.x natív animációkat (useNativeDriver) és Deep Links integrációt használ. Az iOS UINavigationController és Android Fragment képernyők natív navigációjához a Wix react-native-navigation könyvtárát használják.

A React Native architektúrája

A React Native architektúra hagyományosan a Bridge köré épült — egy aszinkron JSON csatorna a JavaScript környezet és a natív kód között. A 0.68-as verziótól kezdve a Meta bevezette a New Architecture-t, amely a Bridge-t JSI-re (JavaScript Interface) és Fabric-re cseréli. Nézzük meg mindkét modellt.

Bridge és Fabric

Bridge — egy szerializált JSON protokoll, amely több szálon fut: JS Thread (React kód értelmezése), Main Thread (UI) és Native Modules Thread (API). Minden interakció a JS és a natív kód között átmegy az objektumok szerializálásán és deszerializálásán, ami késedelmeket okoz gyakori hívásoknál. Egy 1000 elemből álló lista görgetésekor a Bridge másodpercenként akár 10 000 JSON üzenetet is generál.

Fabric — az új megjelenítési rendszer a React Native-ben. A Bridge helyett a Fabric egy C++ Shadow Tree-t használ, amely a JSI-n keresztül szinkronizál az UI szállal. Ez megszünteti a JSON szerializálást: a natív C++ kód közvetlenül hív függvényeket a JavaScript környezetben és fordítva. A Fabric a megjelenítési késleltetést 16 ms-ról (Bridge) 2–4 ms-ra csökkenti.

TurboModules — a New Architecture második része. A régi modellben minden natív modul betöltődött az alkalmazás indításakor. A TurboModules lustán tölti be a modulokat (lazy loading) — csak amikor a JS kód első alkalommal kéri őket. Ez 40%-kal csökkenti a hidegindítási időt a 20+ natív modullal rendelkező alkalmazásokban.

Példa alkalmazásra React Native-ben

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;

Natív modulok

Natív modulok — egy mechanizmus a platform API-ok meghívására JavaScriptből. Ha a funkcionalitást nem fedik le a standard React Native komponensek (kamera, Bluetooth, biometria), a fejlesztő ír egy modult Swift/Kotlin nyelven és regisztrálja azt RCTBridgeModule vagy TurboModule révén. A natív függvény JS-ből a NativeModules.CameraModule.takePhoto() segítségével hívható.

A React Native kész natív modulokat biztosít a gyorsulásmérő (react-native-sensors), a helymeghatározás (@react-native-community/geolocation), a biometria (react-native-biometrics) és a helyi értesítések (@notifee/react-native) eléréséhez. Egyedi forgatókönyvekhez az Expo Expo Modules API-t kínál — egy egyszerűbb interfészt natív modulok létrehozásához Xcode vagy Android Studio nélkül.

A React Native előnyei

Hatalmas közösség — a React Native rendelkezik a legnagyobb közösséggel a cross-platform keretrendszerek között. A GitHub-on a projektnek 117 000+ csillaga, 1800+ közreműködője van. Az npm hetente 3 millió+ alkalommal tölti le a react-native-t. A React Native-nal kapcsolatos kérdések a Stack Overflow mobilfejlesztési szekciójában az összes kérdés 5%-át teszik ki.

JavaScript ökoszisztéma — a React fejlesztők ugyanazokat az eszközöket használják, mint a weben: npm, Babel, ESLint, Prettier, Jest, TypeScript. Az üzleti logika elfhasználható a webes verzió (React) és a mobilalkalmazás (React Native) között. A Redux, Zustand, React Query, React Hook Form könyvtárak változtatás nélkül működnek mindkét platformon.

Expo — egy SDK és eszközkészlet, amely leegyszerűsíti a React Native fejlesztést. Az Expo kész modulokat (kamera, értesítések, térképek, OAuth), felhőbeli fordítást (EAS Build) és OTA frissítéseket (EAS Update) kínál. Az Expo Go lehetővé teszi az alkalmazás fizikai eszközön történő futtatását Xcode és Android Studio nélkül. Az Expo 2024 adatai szerint az új React Native projektek 70%-a használ Expo-t.

OTA frissítések — egy funkció, amely az Expo Update és a CodePush (Microsoft) révén érhető el. A fejlesztők közvetlenül küldhetnek JavaScript csomagfrissítéseket a felhasználóknak anélkül, hogy át kellene esniük az App Store vagy a Google Play áttekintésén. Ez felgyorsítja a kritikus hibák javítását 2–5 napról (áttekintés várása) 1–2 órára.

TypeScript támogatás alapértelmezés szerint be van kapcsolva a React Native 0.71-től. A projektsablon tartalmaz tsconfig.json-t, típusokat az összes komponenshez és strict mode támogatást. A Flow (statikus típusozás a Facebooktól) szintén támogatott, de a Meta hivatalosan a TypeScript-t ajánlja. A TypeScript sablon az új projektek 85%-át teszi ki a State of React Native 2024 felmérés szerint.

Ökoszisztéma és népszerű könyvtárak

npm — a fő csomagregiszter a React Native számára. A könyvtárak keresése a react-native kulcsszóval szűrhető. Telepítéshez az npm install vagy a yarn add használható. A React Native CLI automatikusan összekapcsolja a natív függőségeket (a 0.60-as verziótól). Expo projektek esetén a telepítést az expo install kezeli, amely kiválasztja a könyvtár kompatibilis verzióját.

Kulcsfontosságú könyvtárak

@react-navigation/native — a de facto szabvány a navigációhoz React Native-ben. A könyvtár tartalmaz Stack Navigator-t (animált átmenetek), Tab Navigator-t (alsó menü iOS/Android rendszerhez), Drawer Navigator-t (oldalsó menü) és Material Top Tab-ot. A React Navigation 7.x (2024) bevezette az útvonalak statikus konfigurációját és a React 18 teljes támogatását a useSyncExternalStore segítségével.

react-native-reanimated — könyvtár nagy teljesítményű animációkhoz. A Reanimated 3.x az animációkat az UI szálon (worklet) hajtja végre, megkerülve a JS szálat. Ez 60 FPS-t garantál akár 100+ elem animálásakor is. A useSharedValue, useAnimatedStyle és withSpring helyettesíti a standard csomag Animated API-ját. A Reanimated az érintési gesztusokat a react-native-gesture-handler segítségével kezeli.

@tanstack/react-query — könyvtár a szerver állapot kezeléséhez. A React Query gyorsítótárolja az API válaszokat, automatikusan ajrakérdezi az adatokat hálózati változáskor (refetchOnReconnect) és támogatja a lapozást a useInfiniteQuery segítségével. Az 5.x verzió optimista frissítéseket tartalmaz az UX-hez — a felület frissül, mielőtt megkapná a szerver választ, majd kijavításra kerül.