核心原理：原生组件映射

React Native 之所以能用 JavaScript 写出真正原生体验的移动应用，而不是将网页封装进 WebView，核心就在于它实现了 React 组件到原生平台 UI 组件的一一映射。理解这一机制，是你从“在移动端写 React”转变为“用 React 写移动端原生应用”的关键。

1. 声明式的 React 组件 → 原生视图

在 React Native 中，你仍然沿用 React 的组件化思维，但使用的并不是 <div>、<span> 等 DOM 元素，而是平台特定的声明式组件，例如：

import { View, Text, Button } from 'react-native';

function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text>你好，React Native！</Text>
      <Button title="点击" onPress={() => alert('已点击')} />
    </View>
  );
}

上面的 JSX 代码背后，React Native 做了这样一套映射：

• <View> → iOS 的 UIView / Android 的 android.view.View
• <Text> → iOS 的 RCTTextView（继承自 UILabel）/ Android 的 TextView
• <Button> → iOS 的 UIButton / Android 的 Button

也就是说，你写下的每一个 React Native 组件，最终都会被实例化为一个真实的原生控件，占据原生视图层级中的节点，可以响应原生手势、拥有原生滚动惯性和渲染性能。这不是在画面中嵌入了一个网页，而是直接驱动了平台的 UI 框架。

2. 跨语言通信：从 JavaScript 到原生

React Native 的核心架构解决了一个本质问题：JavaScript 代码如何创建并操作原生 UI？

在经典的旧架构（Bridge 时代）中，流程大致如下：

1. JS 线程：运行 React 代码，通过虚拟 DOM 和 Diff 计算出视图变更，生成一份“指令清单”。
2. Bridge：这些指令（例如“创建类型为 RCTView 的节点”、“设置属性 opacity = 0.5”）被序列化为 JSON 消息，通过异步跨线程队列传递给原生层。
3. 原生线程：接收到消息后，反序列化并调用对应的原生 API，创建或修改真实的原生控件。

整个过程 JavaScript 侧和原生侧运行在不同线程，通过批量异步通信保持界面响应。但 Bridge 本身存在瓶颈：所有通信都必须经过序列化 → 传输 → 反序列化，不适用于高频交互（如动画、连续手势）。

3. 新架构下的直接映射（Fabric / JSI）

为了突破 Bridge 的异步和序列化限制，React Native 团队推出了一套原生组件映射的新架构，核心包括：

• JSI（JavaScript Interface）：让 JavaScript 可以直接持有对 C++ 对象的引用，从而同步调用原生方法，无需经过 JSON 序列化和 Bridge 跳转。
• Fabric 渲染器：将 React 组件树映射为 C++ 层的“影子树”（Shadow Tree），在独立线程上进行布局计算（基于 Yoga 布局引擎，实现 Flexbox 算法），最后直接提交给原生平台渲染。
• Turbo Modules：实现按需加载原生模块，并支持同步调用，提升了模块调用性能。

在新架构下，<View> 不再通过序列化指令传递，而是由 JavaScript 直接操作 C++ 中的影子节点，原生组件映射的效率大幅提升，动画、手势等场景能够获得接近纯原生 60fps 的体验。不过，从开发者的角度看，使用方式并没有改变——你仍然只用编写 React 组件，React Native 在底层自动处理了映射与通信。

4. 自定义映射：扩展原生组件

React Native 内置了 View、Text、Image、ScrollView、FlatList 等常用原生组件的映射，但实际项目中常常需要封装自己平台特有的 UI 控件（例如一个原生的视频播放器、地图控件）。React Native 提供了原生 UI 组件的封装能力，你可以通过以下步骤创建一个自定义映射：

1. 原生侧：在 iOS 使用 Objective‑C / Swift 继承 RCTViewManager，暴露属性和方法；在 Android 使用 Java / Kotlin 继承 SimpleViewManager 或 ReactViewManager。
2. JS 侧：使用 requireNativeComponent 将原生组件包装成一个标准的 React 组件。

import { requireNativeComponent } from 'react-native';
const MyCustomView = requireNativeComponent('MyCustomView');

// 使用起来和普通组件完全一样
<MyCustomView style={{ width: 200, height: 200 }} color="red" />

这种映射机制让 React Native 具备了无限扩展的能力：任何平台原生的 UI 能力，都可以被封装成 React 组件，由 JavaScript 业务层统一组装和复用。这也正是“一次学习，随处编写”的底气所在——绝大部分业务逻辑和 UI 结构写在 JavaScript 端，只有平台强相关的部分保留为原生扩展。

小结：原生组件映射是 React Native 的基石。它将 React 的声明式组件模型与移动平台的原生 UI 系统直接链接，让开发者忽略底层通信细节，用同一套 React 思维构建真正的原生应用。当你理解了 <View> 背后是一个 UIView，而不仅仅是某种抽象的盒子，就真正进入了跨端开发的内核。