React Native: چیست، Bridge چگونه کار می‌کند و محیط JavaScript

React Native چیست

React Native — چارچوبی است که توسط تیم Facebook (اکنون Meta) ساخته شد و در سال 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) با پشتیبانی از Yoga 3.0 برای چیدمان Flexbox به طور کامل به معماری New Architecture منتقل شده است.

به گزارش 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 از \u0648ب به پلتفرم‌های موبایل بود. اولین کامیت در مخزن در سال 2013 به عنوان پروژه داخلی Facebook برای ساخت اپلیکیشن Facebook Groups در iOS ایجاد شد.

نسخه 0.70 (2022) Hermes را به عنوان موتور پیش‌فرض JavaScript معرفی کرد. Hermes یک موتور با کامپایل پیش‌نگار (AOT) است که برای دستگاه‌های موبایل بهینه‌سازی شده است. زمان راه‌اندازی اپلیکیشن را 50% کاهش می‌دهد و اندازه APK را در مقایسه با JavaScriptCore 30% کوچک‌تر می‌کند. Hermes از ES6 و بخشی از ES2020 پشتیبانی می‌کند.

تفاوت React Native و React Web

React Web کامپوننت‌ها را از طریق ReactDOM به عناصر DOM (div، span، p) رندر می‌کند. 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 استفاده می‌کند که از طریق JSI با رشته UI همگام می‌شود. این سریالیزاسیون JSON را حذف می‌کند: کد C++ طبیعی مستقیماً توابع را در محیط JavaScript فراخوان می‌کند و برعکس. Fabric تأخیر رندر را از 16 ms (Bridge) به 2–4 ms کاهش می‌دهد.

TurboModules — بخش دوم New Architecture. در مدل قدیمی، همه ماژول‌های طبیعی در حین شروع اپلیکیشن بارگیری می‌شدند. TurboModules ماژول‌ها را به صورت تنبل (lazy loading) بارگیری می‌کند — فقط وقتی کد JS اولین بار آن‌ها را درخواست کند. این زمان شروع سرد را در اپلیکیشن‌های با 20+ ماژول طبیعی 40% کاهش می‌دهد.

نمونه اپلیکیشن در 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 بر پایه نظرسنجی State of React Native 2024، 85% پروژه‌های جدید را تشکیل می‌دهد.

اکوسیستم و کتابخانه‌های محبوب

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 است — رابط پیش از دریافت پاسخ سرور به‌روز می‌شود و سپس تصحیح می‌شود.