React Native浅析

1. 接入方式：全量接入与混合接入

React Native 支持全量接入（纯 RN 应用）与混合接入（在原生 iOS 应用中嵌入 RN 页面），适合渐进式开发与已有项目集成。

全量接入

• 使用 React Native CLI 创建项目：

npx react-native init MyApp

• JS 端通过 AppRegistry.registerComponent 注册入口组件：

AppRegistry.registerComponent("MyApp", () => App);

混合接入

• 原生 App 中集成 RN 模块：

NSURL *jsCodeLocation = [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                        moduleProvider:nil
                                         launchOptions:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                 moduleName:@"MyApp"
                                          initialProperties:@{}];

• 在原生页面中展示 RCTRootView，嵌入 RN 页面。

RN 0.78+ 新接入方式

• 推荐使用 RCTReactNativeFactory 和 ReactNativeDelegate 创建 RN 实例，更模块化、解耦。

let delegate = ReactNativeDelegate()
let factory = RCTReactNativeFactory(delegate: delegate)
let rootView = factory.rootViewFactory.view(withModuleName: "MyApp")

2. 布局方式：Flexbox vs AutoLayout

React Native 使用 Flexbox 进行布局，后端通过 Yoga 引擎异步计算位置，适合移动端异构设备。

示例

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-around'}}>
  <View style={{width:50, height:50, backgroundColor:'blue'}}/>
  <View style={{width:50, height:50, backgroundColor:'red'}}/>
</View>

特点对比

image.png

3. 交互方式：事件、手势与动画

事件系统

• JS 端可通过 onPress, onChangeText, onScroll 等绑定事件。

• 事件从 Native 端捕获后，通过桥传递给 JS 端执行回调。

手势处理

• 推荐使用社区库 react-native-gesture-handler：

import { TapGestureHandler } from 'react-native-gesture-handler';
<TapGestureHandler onActivated={() => console.log("Tapped")}>...</TapGestureHandler>

动画机制

• Animated：支持插值、缓动函数、原生驱动（useNativeDriver）。

• LayoutAnimation：自动处理布局变更的过渡效果。

• react-native-reanimated：支持线程内执行动画，性能更高。

4. 底层原理：渲染与通信机制

旧架构：Bridge 通信模型

• JS 与 Native 通过异步 Bridge 进行通信，存在性能瓶颈。

• 通信过程：JS → JSON → MessageQueue → Native Module 调用 → Callback → JS。

新架构：Fabric + JSI + TurboModules

• JSI（JavaScript Interface）：使用 C++ 实现 JS 与 Native 的桥接，去除 JSON 序列化。

• TurboModules：支持同步调用 Native 模块，使用代码生成提升性能。

• Fabric Renderer：重构 UI 渲染系统，统一异步渲染、并发更新。

架构演进流程图

image.png

5. 性能优化方案

RN 页面加载白屏的产生原因

1. JS Bundle 下载或加载慢：首次加载需从服务器获取。

2. RN 初始化延迟：包括 Bridge 初始化、模块注册、RootView 创建。

3. Native → JS 通信耗时：首帧依赖大量 JS 执行逻辑。

4. 资源阻塞：网络资源、图片或大模块引入拖慢渲染。

白屏优化方案

步骤一：提前初始化 RN 引擎

• 主流程初始化：App 启动后，在后台线程中初始化 RCTBridge。

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
  [MyRNEngineManager sharedManager];
});

步骤二：使用预加载 RootView

• 在首次使用前初始化并缓存 RCTRootView 实例。

步骤三：本地 Bundle 资源离线化

• 将 JS Bundle 打包进 App，避免在线加载。

• 修改 bundle 加载路径：

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

步骤四：Skeleton 骨架屏占位

• Native 提前渲染骨架图，覆盖 RN 页面加载期间白屏区域。

• 使用 Lottie 或图片静态展示。

步骤五：监控与优化 JS 执行

• 使用 Flipper、react-devtools 监控 JS 阻塞、慢函数。

• 进行 JS Split Bundle、代码拆分优化。

总结

React Native 提供了跨平台开发的便利，但在混合应用中接入与优化 RN 页面性能仍是重中之重。白屏优化涉及预加载、缓存策略、本地 bundle、动画骨架与初始化顺序的细致调控。对 iOS 开发者而言，深入理解 RN 渲染与通信原理，是解决性能问题的关键路径。