React Native 基础篇

React Native 是由 Meta（原 Facebook） 开源的跨平台移动应用开发框架，2015 年正式发布。开发者可以使用 React 与 JavaScript 编写业务代码，最终构建出可运行在 iOS、Android 平台的原生移动应用。

核心特点

• Learn Once, Write Anywhere：复用 React 的语法体系，组件会映射为平台原生 UI 组件，例如 <View> 对应 iOS 的 UIView、Android 的 View，并非浏览器 DOM 元素。
• 原生渲染：不依赖 WebView 容器，直接调用系统原生 UI 组件与平台 API，应用性能可以接近纯原生开发的效果。
• 热重载（Fast Refresh）：修改业务代码后可以实时预览变更效果，同时保留应用运行状态，有效提升迭代开发效率。

Yoga 布局引擎：React Native 使用 Yoga（C++ 实现的 Flexbox 引擎）统一跨平台布局计算，iOS、Android 两端拿到已经算好的布局结果，保证两端布局行为一致，和网页 CSS Flexbox 存在少量差异。

创建项目

当前 React Native 官方与社区已将 Expo 作为默认推荐的项目创建方式。

Expo 是构建在 React Native 之上的上层框架。React Native 承担底层渲染引擎能力，Expo 在其基础上封装了完整的工具链、原生能力封装与开发服务，降低原生环境配置成本。

npx create-expo-app@latest react-native-demo
cd react-native-demo
npx expo start

执行 npx expo start 完成开发服务启动，终端会输出二维码。

Android 实体设备运行项目：

• 在 Android 设备安装 Expo Go 应用。
• 打开 Expo Go，选择扫码功能，扫描终端输出的二维码。
• 保证电脑与手机处于同一个 Wi-Fi 局域网。扫码调试时电脑若只用有线网，手机可能连不上 Metro。

Expo 两种工作模式：

Expo Go（托管工作流）：不需要 Android Studio / Xcode，使用 Expo Go App 调试；部分高度定制的第三方原生库无法直接使用。

开发构建（Development Build）：执行 npx expo prebuild 生成本地原生工程，可以引入自定义原生代码，同时保留 Expo 的工具链能力，是现在官方推荐的生产项目模式。

本地构建 APK

使用 Expo 预构建能力，会生成原生 Android 工程目录，用于本地编译打包。

大型项目还可以使用 EAS Build 云端构建，无需本地安装完整 Android 环境，在云端生成 APK / AAB 安装包。

环境准备

打包 Android APK 前，需要完成 Android 开发环境部署。

• 安装 Android Studio：前往 Android Studio 官网 下载安装，安装向导勾选 Android Studio、Android Virtual Device（AVD）。
• 配置 Android SDK：打开 Android Studio，进入 Settings > Languages & Frameworks > Android SDK
  • SDK Platforms：勾选 Android 15 (VanillaIceCream) 下的 Android SDK Platform 35。
  • SDK Tools：确认安装 Android SDK Build-Tools、Android Emulator。
• Windows 系统环境变量配置：新建系统变量 ANDROID_HOME，取值为 Android SDK 路径，默认路径：%LOCALAPPDATA%\Android\Sdk，将 %ANDROID_HOME%\platform-tools 添加到系统 Path。
• 校验环境有效性：打开终端执行下面命令，输出版本信息代表环境配置正常：

adb --version

构建 Debug 调试版 APK

调试包不需要签名，可直接安装到设备或模拟器，适用于开发阶段测试验证。

执行命令会自动调用 npx expo prebuild 生成 android 原生工程目录，编译原生代码，同时可以自动安装到已连接设备或模拟器。

npx expo run:android
# 等价简写
npm run android

构建产物输出路径：

android/app/build/outputs/apk/debug/app-debug.apk

构建 Release 正式版 APK

正式发布的 Release 包必须配置签名，才可以安装到设备或者提交到应用商店。

生成签名密钥

进入项目根目录，使用 keytool 生成密钥文件：

cd react-native-demo
keytool -genkey -v -keystore react-native-demo.keystore -alias react-native-demo -keyalg RSA -keysize 2048 -validity 10000

执行命令过程中，按提示填写密钥库密码、密钥密码，以及姓名、组织单位等信息。命令执行完成后，将生成的 .keystore 文件移动至 android/app 目录。

安全提示：密钥文件属于核心资产，请做好备份，切勿提交到代码仓库。

Gradle 签名配置

打开 android/gradle.properties，在文件末尾追加签名配置：

MYAPP_UPLOAD_STORE_FILE=react-native-demo.keystore
MYAPP_UPLOAD_KEY_ALIAS=react-native-demo
MYAPP_UPLOAD_STORE_PASSWORD=[密钥库密码]
MYAPP_UPLOAD_KEY_PASSWORD=[密钥密码]

安全建议：为避免密码明文提交仓库，可以将上述配置写到用户级别的 ~/.gradle/gradle.properties，仅本机生效。

修改 app/build.gradle

编辑 android/app/build.gradle，在 signingConfigs 节点增加 release 签名配置：

android {
  signingConfigs {
    release {
      if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
        storeFile file(MYAPP_UPLOAD_STORE_FILE)
        storePassword MYAPP_UPLOAD_STORE_PASSWORD
        keyAlias MYAPP_UPLOAD_KEY_ALIAS
        keyPassword MYAPP_UPLOAD_KEY_PASSWORD
      }
    }
  }
}

编译 Release APK

cd android
./gradlew assembleRelease

正式包输出路径：android/app/build/outputs/apk/release/app-release.apk。

核心基础知识

内置核心组件

React Native 没有 HTML DOM 标签，全部使用内置组件，核心高频组件如下：

注意：Text strings must be rendered within a <Text> component，任何文本字符、空格、换行都必须放在 <Text> 内部，不能直接放在 View 下。

样式系统

• 不使用 CSS 文件，样式使用 JS 对象，属性为驼峰命名，例如 backgroundColor，而不是 background-color。
• 两种写法：行内对象、StyleSheet.create。StyleSheet 会做样式校验，性能更好，推荐抽离样式使用。
• Flexbox 布局差异：默认主轴是 column（垂直），网页默认 row（水平），需要横向布局要显式设置 flexDirection:'row'。
• flex: 1：代表占满父容器剩余全部空间，RN 高频写法。

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

export default function Demo(){
  return (
    <View style={styles.box}>
      <Text style={styles.text}>示例文本</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  box: {
    flex:1,
    backgroundColor:'#fff'
  },
  text:{
    fontSize:16
  }
})

平台差异处理

不同系统（iOS、Android）UI、API 行为不一样，RN 提供工具处理平台差异化代码。

• Platform.OS 获取当前系统，值为 ios、android。
• Platform.select() 根据平台返回不同配置。
• 文件后缀分离：创建 Component.ios.js、Component.android.js，导入时直接写 import X from './Component'，框架自动加载对应平台文件。

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

const titleStyle = Platform.select({
  ios: { fontSize:18, color:'#007aff' },
  android: { fontSize:17, color:'#2196f3' }
})

导航（React Navigation）

React Native 本身不带页面路由，社区事实标准库是 React Navigation，Expo 项目也可以使用更简洁的 Expo Router（文件路由）。

常见导航类型：

• Stack（堆栈导航）：页面入栈出栈，push、pop，普通页面跳转。
• Tab（标签导航）：底部 Tab 切换首页、我的等页面。
• Drawer（抽屉导航）：侧边滑出菜单。

注意：导航属于第三方库，需要手动安装依赖，不属于 RN 内核。

通信架构简单理解（新旧架构）

• 旧架构（Bridge）：JS 线程与原生线程通过 Bridge 传递 JSON 消息，全部通信是异步；大数据传输、动画场景会存在性能瓶颈，存在序列化开销。
• 新架构（Fabric + TurboModules + JSI）：
  • JSI：JS 可以直接调用 C++ 对象，不需要 JSON 序列化，支持同步调用。
  • Fabric：新版渲染器，C++ 层维护 UI 影子树，提升列表、手势动画性能。
  • TurboModules：原生模块按需加载，减少 App 启动耗时。

较新的 React Native、Expo 已逐步把新架构作为默认，旧 Bridge 仍会出现在存量项目里。

Hermes JS 引擎

Hermes 是 Meta 为 React Native 打造的 JavaScript 引擎。编译阶段把 JS 字节码预编译，显著降低 App 启动时间、减少内存占用，Expo 新建项目默认开启 Hermes。

常见问题

React Native 的优势与局限

优势

• 跨平台代码复用：业务代码通常可以实现 70%－90% 在多端共享。
• 开发效率高：支持热重载，采用 React 声明式 UI 开发范式。
• 生态完善：拥有大量成熟第三方库，例如 React Navigation、Reanimated。
• 原生可扩展：支持自定义原生模块，调用系统平台独有的能力。

局限

• 桥接层性能开销：JS 与原生之间通过 Bridge 通信，序列化会带来性能损耗，在动画、大批量数据传输场景会更加明显。
• 原生能力依赖：复杂硬件、系统能力需求，仍然需要编写原生代码。
• 跨层调试成本高：JavaScript 层与原生层互相调用，出现问题时排查链路更长。
• 系统特性跟进滞后：iOS、Android 发布全新系统能力，需要等待 React Native 社区完成适配。

React Native 与 uni-app 对比

React Native 侧重追求接近原生的体验，重视性能与全球生态；uni-app 侧重更广的平台覆盖，一套代码同时产出 App、小程序、H5。

参考资料

Expo 中文网

React Native 中文网