React Native 项目开发概述（附带官方脚手架 & Expo 讲解）

React Native（简称 RN）是 Meta 推出的跨端移动开发框架：使用 JavaScript / TypeScript 编写业务代码，最终渲染成安卓、iOS 的原生控件，不是网页套壳。一套业务代码可以同时运行在 Android 和 iOS，兼顾开发效率与原生体验。

核心思想：用 JS 写界面逻辑，通过 JS 桥调用平台原生组件（View、Text、Image），样式使用 Flexbox，没有 DOM。

RN 开发有两条主流技术路线：官方脚手架（Bare 裸项目） 和 Expo，下面先讲通用开发流程，再分开讲两条路线。

一、RN 通用开发流程（两条路线都适用）

  1. 环境准备
    • Node.js + npm/yarn：RN 和 Expo 都依赖
    • 代码编辑器：VS Code，推荐插件：React Native Tools、TypeScript
  2. 创建项目：二选一：官方脚手架 / Expo
  3. 业务开发
    • 使用 RN 内置原生组件搭建页面：View（容器）、Text（文字）、Image（图片）、TextInput（输入框）、ScrollView/FlatList（滚动列表）、TouchableOpacity（点击）
    • 样式：StyleSheet.create，Flex 布局，无 px，单位是设备独立像素
    • 路由：@react-navigation 页面跳转
    • 网络：axios / fetch 请求后端接口
    • 状态管理：简单场景 useState/useContext；复杂业务 Zustand、Redux Toolkit
    • 原生能力：相机、定位、存储、推送等，需要安装对应原生库
  4. 调试
    • 模拟器 / 真机预览；摇一摇打开开发者菜单；热重载快速看修改效果；Flipper 查看日志、网络
  5. 打包发布
    • Android：生成 APK（本地安装）或 AAB（上架应用商店）
    • iOS：打包 IPA，上传 App Store Connect

RN 通用痛点：安卓 iOS 平台差异、原生库需要编译、长列表性能要使用 FlatList/FlashList、权限需要分别在两端配置。

二、路线1：官方脚手架（Bare React Native，裸项目）

官方 CLI，react-native 脚手架，直接生成完整的 Android、iOS 原生工程目录。 本质：RN JS代码 + 完整安卓、iOS 原生项目，你可以直接修改原生代码。

创建项目

# 创建 TypeScript 模板项目
npx react-native@latest init RNBareDemo --template react-native-template-typescript
cd RNBareDemo

运行项目

# Android，需要 Android Studio + 模拟器/USB真机
npm run android

# iOS，仅macOS，需要Xcode + CocoaPods
npm run ios

目录特点

项目自带 android/ 和 ios/ 文件夹，这两个就是标准安卓、iOS原生工程。 你可以在这里写 Java/Kotlin、Swift/Objective-C，修改 gradle、pod 配置、权限、应用签名。

✅ 优点

  1. 完全自由，支持手写自定义原生代码
  2. 对接厂商私有SDK、蓝牙、串口、硬件设备无限制
  3. RN 版本可以自主升级，不受第三方SDK版本捆绑
  4. 混合开发友好：已有原生App嵌入RN页面

❌ 缺点

  1. 环境很重：安卓要装Android Studio、SDK；iOS必须mac+Xcode，新人环境踩坑非常多
  2. 大部分第三方原生库安装后，iOS需要执行pod install，并且需要重新编译App，编译耗时久
  3. 真机调试需要USB数据线；iOS真机调试需要开发者证书
  4. 不能扫码预览，每次新增原生依赖都要全量编译项目

打包

  • Android：进入 android 目录，./gradlew assembleRelease 打APK；./gradlew bundleRelease 打AAB
  • iOS：Xcode Archive 打包，上传App Store

适用场景

企业正式App、需要深度原生定制、硬件对接、已有原生App做混合开发。

三、路线2：Expo

Expo 是基于 React Native 的上层工具链，封装了原生层，默认隐藏 android/ios 原生工程，屏蔽原生编译的复杂工作。 核心产品：Expo Go（开发预览）、EAS Build（云端打包）

创建项目

# 创建TS项目
npx create-expo-app ExpoDemo
cd ExpoDemo

运行项目

npx expo start

启动后生成二维码，手机安装 Expo Go App，扫码即可实时预览项目。

Windows / Mac 都可以开发，不需要 Android Studio、Xcode。

目录特点

默认没有 android、ios 文件夹，原生配置写在 app.json。 只有执行 npx expo prebuild 才会生成 android/ios 文件夹，此时项目变成预构建裸项目，失去Expo的便捷性。

✅ 优点

  1. 环境极简，只需要 Node，新人上手快
  2. Expo Go扫码预览，多人协作分享页面非常方便，代码修改实时刷新
  3. 大量原生能力（相机、定位、文件、推送）已经封装好，安装库不用手动配置原生
  4. EAS云端打包，本地不用搭建编译环境，一键打包Android/iOS安装包

❌ 缺点

  1. RN版本、第三方原生库版本绑定 Expo SDK，升级要跟着Expo SDK走，版本限制大
  2. 默认不能写自定义原生代码。如需原生代码：使用Expo插件 + Dev Build，或者 prebuild 退化成裸项目
  3. 小众/私有原生SDK很难接入；打包产物体积比裸项目略大

打包

使用 EAS 云端打包

npm install -g eas-cli
eas login
eas build:configure
eas build --platform android
eas build --platform ios

适用场景

产品原型、内部工具、轻量商业App；团队不想维护笨重的安卓iOS编译环境。

四、快速选型总结

  • 项目需要自定义原生代码、对接硬件、私有SDK → 官方脚手架 Bare RN
  • 快速开发原型、原生需求都是通用能力，不想折腾安卓iOS环境 → Expo

五、两条路线对比精简版

React Native 主流UI框架（区分Bare裸项目 / Expo兼容性）

全部支持TS，大部分Expo、官方脚手架裸项目都能用；少数库自带原生依赖，裸项目需要编译，Expo要用dev build。

1. React Native Paper（推荐 Material Design）

项目地址：github.com/callstack/react-native-paper

  • 设计规范：Google Material Design3，风格现代、干净
  • 组件：Button、Input、Card、Dialog、Drawer、下拉、进度条，业务组件齐全
  • 兼容：✅ Expo、✅ Bare RN
  • 优点：文档完善、主题系统成熟，支持明暗主题切换，维护稳定
  • 缺点：视觉偏安卓风格，iOS原生感弱一点
  • 适合：工具类App、后台管理App、偏Android风格产品
#安装
npm install react-native-paper

2. Ant Design Mobile RN（antd-rn，国内最熟悉）

项目地址：github.com/ant-design/ant-design-mobile-rn

  • 阿里antd移动端RN版本，和Web antd设计语言一致
  • 组件：表单、弹窗、tabs、列表、搜索栏，适合国内业务系统
  • 兼容：✅Bare RN；✅Expo（部分原生组件需要dev build）
  • 优点：中文文档，前端熟悉antd上手极快，适合B端、后台、内部系统
  • 缺点：近年更新速度一般，部分组件老旧，复杂动画一般
  • 适合：国内企业后台、内部管理APP、中台类项目

3. Gluestack UI（新一代，NativeBase继任者）

项目地址：github.com/gluestack/gluestack-ui

  • 现代设计系统，支持按需复制组件，搭配NativeWind(Tailwind)
  • 兼容：✅Expo、✅Bare RN，支持Expo Router
  • 优点：可只引入需要组件，包体积可控；可访问性好，主题Token强大；支持一键复制组件源码到项目，没有重度依赖锁死
  • 缺点：学习成本略高，需要适应它的主题体系
  • 适合：中大型商业项目、需要自定义品牌主题、想要Tailwind风格

4. Tamagui（高性能优先）

项目地址：github.com/tamagui/tamagui

  • 高性能通用跨端组件库，支持RN + Web一套代码，编译时优化样式，性能很强
  • 兼容：✅Expo、✅Bare RN
  • 优点：headless无样式原语 + 预设组件二选一；复杂动画、弹窗、sheet、下拉菜单能力极强，TS类型完善
  • 缺点：上手门槛高，学习曲线陡，包和配置复杂
  • 适合：高性能要求、复杂交互、RN+Web多端同构的企业项目

5. UI Kitten（Eva Design System，主题强）

项目地址：github.com/akveo/react-native-ui-kitten

  • 基于Eva设计体系，主打动态主题切换，一键切换深色/浅色，自定义主题变量简单
  • 兼容：✅Expo、✅Bare RN
  • 优点：内置大量图标，主题配置简单，适合需要换肤的App
  • 缺点：组件自定义深度有限，国内使用量偏少
  • 适合：需要多套主题、换肤功能的App

6. React Native Elements（RNE，轻量简洁老牌库）

项目地址：github.com/react-native-elements/react-native-elements

  • 老牌轻量UI库，风格简约，API简单
  • 兼容：✅Expo、✅Bare RN
  • 优点：上手最简单，组件不多但够用，适合快速原型
  • 缺点：维护活跃度一般，复杂业务组件不足，不适合大型长期项目
  • 适合：Demo、快速原型、小型简单App

7. NativeWind（不是完整组件库，是Tailwind CSS for RN）

项目地址：github.com/nativewind/nativewind

很多人会混淆，它只是样式工具，不是组件库；常搭配 gluestack、nativecn使用

  • 用Tailwind类写RN样式，不用写StyleSheet.create
  • ✅ Expo、✅Bare RN都支持
  • 适合：熟悉web Tailwind的开发者，快速写自定义组件

8. NativeCN UI（shadcn/ui RN移植）

项目地址：github.com/Mobilecn-UI/nativecn-ui

  • 理念和web shadcn一样：复制组件源码进项目，不是安装大依赖包，基于NativeWind
  • ✅Expo、✅Bare RN
  • 优点：组件完全在你项目内，可以随便改，无版本锁定，现代干净UI
  • 缺点：需要自己维护复制进来的组件，没有统一升级
  • 适合：喜欢shadcn、想高度自主掌控UI的团队

快速选型建议

  1. 国内B端、后台、内部系统，前端熟悉antd → Ant Design Mobile RN
  2. Material风格，稳定成熟，快速开发 → React Native Paper
  3. 新项目，想要强主题、可控包体积，兼顾Expo/Bare → Gluestack UI
  4. 追求极致性能、复杂弹窗/动画，RN+Web同构 → Tamagui
  5. 快速原型、简单小项目 → React Native Elements
  6. 喜欢Tailwind、shadcn开发体验 → NativeCN + NativeWind

Expo vs Bare 额外注意点

  • Expo Go：如果只用Expo Go直接扫码预览，不要选带原生依赖很重的库，否则会报错，要用EAS Dev Build
  • Bare官方脚手架：上面所有库都可以用，遇到原生相关组件记得iOS执行pod install