React Native 是什么？

React Native（简称 RN）是一个用 JavaScript/TypeScript + React 开发 iOS 与 Android 应用的框架。

你可以理解成：

  • React 负责“组件化思维”
  • React Native 负责“把组件渲染成原生控件”

它不是 WebView 套壳，而是通过桥接（新架构下是 JSI/TurboModules/Fabric）去调用原生能力。

适合什么场景？

比较适合：

  • 中后台类 App
  • 内容展示类应用
  • 创业期希望 iOS/Android 快速同步开发
  • 团队已有 React 技术栈

不太适合（或要谨慎评估）：

  • 极致性能要求的 3D/重度图形应用
  • 深度依赖平台底层能力且无成熟 RN 插件支持的项目

开发环境搭建（推荐 Expo 起步）

RN 有两条主流路线：

  1. Expo（推荐新手）：开箱即用，效率高
  2. React Native CLI（原生可控更强）

1）安装 Node.js

建议 Node LTS 版本。

1
2
node -v
npm -v

2）创建 Expo 项目

1
2
3
npx create-expo-app rn-demo
cd rn-demo
npm run start

然后可以用：

  • Expo Go（手机扫码预览）
  • iOS 模拟器 / Android 模拟器

3）推荐依赖

1
2
3
npm i axios @tanstack/react-query
npm i @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

项目结构建议

一个清晰的结构示例：

1
2
3
4
5
6
7
8
9
src/
  api/            # 接口层
  components/     # 通用组件
  screens/        # 页面
  navigation/     # 路由配置
  store/          # 全局状态（Zustand/Redux）
  hooks/          # 自定义 hooks
  utils/          # 工具函数
  constants/      # 常量

一个简单页面示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React from 'react';
import { SafeAreaView, Text, StyleSheet, Pressable } from 'react-native';

export default function HomeScreen() {
  const onPress = () => {
    console.log('Hello RN');
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Hello React Native 👋</Text>
      <Pressable style={styles.btn} onPress={onPress}>
        <Text style={styles.btnText}>点我试试</Text>
      </Pressable>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0f172a',
  },
  title: {
    color: '#fff',
    fontSize: 24,
    marginBottom: 20,
    fontWeight: '700',
  },
  btn: {
    backgroundColor: '#22c55e',
    paddingHorizontal: 18,
    paddingVertical: 10,
    borderRadius: 8,
  },
  btnText: {
    color: '#052e16',
    fontWeight: '600',
  },
});

路由：React Navigation

基础配置思路：

  • 建立 Stack 管理主流程
  • 复杂应用可叠加 Bottom Tabs
  • 参数通过 route.params 传递
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '@/screens/HomeScreen';
import DetailScreen from '@/screens/DetailScreen';

const Stack = createNativeStackNavigator();

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

数据请求与缓存

推荐组合：

  • axios：请求
  • react-query：缓存、重试、加载态管理

优势：

  • 自动缓存
  • 错误重试
  • 请求状态统一（loading / error / success）

状态管理建议

按规模选型：

  • 小项目：Context + useReducer
  • 中项目：Zustand（轻量、心智负担低）
  • 大项目：Redux Toolkit（生态完整、可维护）

原则：

  • UI 局部状态本地化
  • 跨页面共享状态再上全局

性能优化 Checklist

  1. 列表使用 FlatList，避免 ScrollView 硬渲染长列表
  2. 组件拆分 + React.memo
  3. 避免在 render 中创建大对象/函数（必要时 useMemo/useCallback）
  4. 图片使用合理尺寸与缓存策略
  5. 动画优先用 Reanimated（更丝滑）

调试与排障

常用工具：

  • Metro 日志
  • React Native DevTools
  • Flipper（部分场景）
  • Sentry（线上错误监控）

常见问题：

  • 依赖安装后报错：清缓存重启
    1
    npx expo start -c
  • Android 构建异常：检查 SDK/JDK 版本
  • iOS 依赖问题：pod install 并清理 DerivedData

发布流程（简版）

Expo 路线（推荐）

使用 EAS Build：

1
2
3
4
5
npm i -g eas-cli
eas login
eas build:configure
eas build -p android
eas build -p ios

原生 CLI 路线

  • Android：生成 AAB 上传到 Google Play
  • iOS：Xcode Archive 上传到 App Store Connect

学习路径建议（2 周）

第 1 周：

  • 完成页面布局 + 路由 + API 请求
  • 做一个“列表 + 详情 + 搜索”Demo

第 2 周：

  • 加入登录态、全局状态、主题切换
  • 打包一个测试版到真机

总结

React Native 的核心价值不是“绝对性能最强”，而是：

  • 研发效率高
  • 组件化体验好
  • 跨平台复用成本低

如果你是 Web 前端转移动端，RN 是一条非常平滑的路径。

如果你想，我下一篇可以继续写：
《React Native + TypeScript 项目模板（可直接开箱）》