React Native 概述

一句话 React Native 是 Meta 开源的跨平台移动应用框架，用 React 和 JavaScript/TypeScript 编写代码，渲染的是原生组件而非 WebView。

一、核心理念

Learn Once, Write Anywhere

不是”Write Once, Run Anywhere”——React Native 不追求一套代码完全通用，而是让你学会一套技术栈后，能分别为 iOS 和 Android 编写接近原生体验的应用。实际上大部分代码（80%~95%）确实可以跨平台复用。

原生渲染，不是 WebView

和 Cordova/Ionic 等 Hybrid 方案不同，React Native 的组件最终映射为平台原生 UI 组件：

所以 React Native 应用的外观和手感跟原生应用一致，不是套了个浏览器壳。

React 的开发体验

如果你会 React，上手 React Native 非常快——组件、JSX、Hooks、状态管理全都一样，只是把 <div> 换成 <View>，<span> 换成 <Text>。

二、架构演进

旧架构（Bridge）

JS 线程 ←→ Bridge（JSON 序列化）←→ Native 线程

• JS 和 Native 之间通过一个异步 Bridge 通信，所有数据都要 JSON 序列化/反序列化
• 瓶颈：大量数据传输时 Bridge 成为性能瓶颈，动画和手势容易卡顿

新架构（2024 年起默认启用）

新架构的核心变化 JS 和 Native 之间从异步消息传递变成了同步直接调用，性能提升显著，尤其是动画和手势交互场景。

三、开发体验

快速开始

目前官方推荐使用 Expo 框架来创建项目：

npx create-expo-app MyApp
cd MyApp
npx expo start

Expo 提供了大量开箱即用的 API（相机、推送通知、文件系统等），大部分场景不需要自己写原生代码。

Expo vs 纯 React Native

Tip 2024 年起 Expo 已经是 React Native 官方推荐的开发方式。除非有非常特殊的原生需求，否则优先选 Expo。

热重载（Hot Reload）

修改代码后即时刷新，不丢失组件状态，开发效率接近 Web 开发。这是相比原生开发的巨大优势——原生开发每次改动都要重新编译。

四、代码示例

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

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <View style={styles.container}>
      <Text style={styles.text}>点了 {count} 次</Text>
      <Button title="点击" onPress={() => setCount(count + 1)} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 24, marginBottom: 16 },
})

和 React 的区别

• 没有 CSS 文件，用 StyleSheet.create() 写样式（类似 inline style，但有优化）
• 布局默认是 Flexbox，而且默认 flexDirection: 'column'（Web 默认是 row）
• 没有 <div>、<p>、<span>，对应的是 <View>、<Text>

五、样式与布局

样式系统

• 没有 CSS，用 JavaScript 对象写样式
• 属性名用驼峰命名：backgroundColor 而不是 background-color
• 单位默认是密度无关像素（dp），不用写 px
• 不支持 CSS 继承（<Text> 内嵌套的 <Text> 除外）

Flexbox 布局

React Native 的布局几乎全靠 Flexbox，但有几个和 Web 不同的默认值：

六、生态系统

七、跨平台方案对比

Quote React Native 最大的优势不是性能，而是让 Web 开发团队以最低成本进入移动端开发。如果团队已经在用 React，那 React Native 几乎是自然的选择。

八、适用场景

知名应用 Meta（Facebook、Instagram、Threads）、Shopify、Discord、Microsoft（Outlook、Teams）、Bloomberg、Coinbase 等都在使用 React Native。

相关笔记

• React 概述
• Vue 概述
• Flutter 概述