人人都会AI编程

27.1 UniApp 跨端开发

更新时间：2026-07-10

React Native（简称 RN）是 Meta 开源的移动端跨平台框架，允许你使用 React 和 JavaScript/TypeScript 构建真正的原生 iOS 和 Android 应用。它与 React Web 共享组件化、声明式、状态管理等核心开发范式，但渲染目标从 DOM 变成了原生平台控件。

核心原理：原生组件映射

React Native 同样使用虚拟 DOM 来描述界面结构，但渲染层与浏览器无关。它通过一个桥接层（Bridge）将 React 组件树转换为对应平台的原生控件：

  • <View> → iOS 的 UIView / Android 的 ViewGroup
  • <Text> → iOS 的 UITextView / Android 的 TextView
  • <Image> → 原生图片加载组件

这与基于 WebView 的混合应用（如 Cordova）有本质区别：RN 界面由原生控件渲染，因此拥有接近原生的交互体验和性能。

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

function HelloWorld() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 20, fontWeight: 'bold' }
});

虽然写法类似 React，但 View 和 Text 并非 HTML 元素，最终会被原生渲染引擎转化为对应平台的原生控件。

开发体系：Expo 与裸工作流

React Native 有两种主流开发方式：

1. Expo（推荐用于新项目）

Expo 是 RN 官方推荐的上层框架，提供了开箱即用的开发体验：

  • 无需配置 Xcode 或 Android Studio 即可开始编码
  • 内置热更新、推送通知、OTA 更新等能力
  • 提供大量高质量的原生模块（相机、地理位置、传感器等）
  • 支持通过 expo-dev-client 在需要时添加自定义原生代码

启动一个新项目非常简单：

npx create-expo-app my-app
cd my-app
npx expo start

然后使用 Expo Go 客户端在真机上实时预览，或在模拟器中测试。

2. 裸工作流（Bare Workflow）

当项目需要深度定制原生功能（如第三方 SDK、复杂动画）时，可以从 Expo 弹出到裸工作流，直接使用 Xcode 和 Android Studio 进行原生代码开发。这会增加配置复杂度，但换取最大的灵活性。

与 Web 端的核心差异

虽然同样使用 React，但实际开发中有不少关键区别：

| 维度 | Web | React Native |
|------|-----|--------------|
| 渲染目标 | DOM 元素 (div, span) | 原生控件 (View, Text) |
| 样式系统 | CSS（支持所有特性） | 类 CSS 子集（StyleSheet.create），Flexbox 为主 |
| 导航 | React Router（URL 路由） | React Navigation（栈、标签、抽屉） |
| 手势 | 鼠标/触屏事件 | 内置手势系统（PanResponder, Pressable） |
| 存储 | localStorage / IndexedDB | AsyncStorage / MMKV |
| 调试 | 浏览器 DevTools | Flipper / React DevTools / 原生调试器 |

更重要的是，不是所有 Web 生态库都能在 RN 中使用。比如直接操作 DOM 的库（D3.js、大部分 CSS 动画库）无法使用，网络请求也需要使用基于原生模块的库（如 Axios 在 RN 中依然可用，因为它只是 fetch 的封装）。许多纯逻辑的 JavaScript 库（如状态管理库）可以直接复用。

项目实战中的要点

1. 布局：Flexbox 是主力

RN 的样式实际上是 JavaScript 对象，通过 StyleSheet.create 创建。它支持 Flexbox 布局，且默认主轴方向为纵向（与 Web 默认横向不同）。

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  }
});

2. 导航：React Navigation

官方推荐的导航库是 React Navigation，支持栈导航（Stack）、标签导航（Tab）和抽屉导航（Drawer）：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 列表性能：FlatList 和 SectionList

RN 提供了高性能列表组件 FlatList，内置虚拟化、下拉刷新、无限滚动：

<FlatList
  data={items}
  renderItem={({ item }) => <ListItem item={item} />}
  keyExtractor={item => item.id}
  onEndReached={loadMore}
/>

4. 网络请求

fetch 在 RN 中直接可用，也可以使用 Axios、TanStack Query 等库。基本用法与 Web 相同。

5. 调试与性能

使用 React DevTools 可以调试组件树，但 RN 也有专门的调试工具：

  • Flipper：官方桌面调试器，支持查看网络、日志、布局
  • React Native Debugger：结合 Redux DevTools 的强大工具
  • 性能监控：Performance 组件，或使用 why-did-you-render 检测不必要的渲染

适用场景与局限性

适用场景：

  • 希望一套代码覆盖 iOS 和 Android，提高开发效率
  • 项目已经使用 React Web 技术栈，团队技能可复用
  • 需要快速迭代、频繁更新的移动应用（热更新优势）
  • MVP 或中小型应用，对极致性能要求不苛刻

局限性：

  • 复杂动画、地图、蓝牙等重度原生交互，仍需编写平台代码（但可以通过原生模块桥接）
  • 初始加载时间比纯原生稍长（JS 引擎启动和执行）
  • 样式系统与 Web 差异大，UI 细节难以做到像素级一致
  • 体积相对较大（一个空项目约 7-10 MB）

总结

React Native 的核心价值在于复用 React 开发模式 + 降低跨平台成本。它让前端开发者能够用熟悉的 JavaScript 和 React 构建原生体验的移动应用，尤其适合已有 React Web 项目的团队向移动端扩展。结合 Expo 的开箱即用和丰富的第三方库，React Native 已成为目前最成熟的跨端移动开发方案之一。