# React Native Turbo Starter：高效加速移动应用开发的创新框架
在移动应用开发中，React Native（RN）凭借“一次编写，多端运行”的理念大受欢迎。然而，随着项目规模增大、性能要求提升，传统的 RN 脚本生成器和 boilerplate 方案往往无法满足“零配置即开箱”以及“高性能”两大需求。为此，社区推出了 **React Native Turbo Starter**——一个集成了 Fabric 渲染管线、TurboModules、Hermes 引擎等现代化技术的全新脚手架，旨在帮助开发者快速搭建高效、可扩展、易维护的移动应用基础架构。
本文将从以下几个方面深度解读 **Turbo Starter**：
1. [框架概述与核心特性](#一-框架概述与核心特性)
2. [快速上手：安装与初始化](#二-快速上手安装与初始化)
3. [核心技术解析：Fabric、TurboModules、Hermes](#三-核心技术解析fabric-turbomodules-hermes)
4. [项目目录与模块组织](#四-项目目录与模块组织)
5. [示例代码：快速创建首页与自定义 TurboModule](#五-示例代码快速创建首页与自定义-turbomodule)
6. [架构图解与数据流示意](#六-架构图解与数据流示意)
7. [性能优化与实战建议](#七-性能优化与实战建议)
8. [总结与拓展](#八-总结与拓展)
---
## 一、框架概述与核心特性
**React Native Turbo Starter**（以下简称“Turbo Starter”）并非普通的 `react-native init` 模板，而是一整套工程化、性能与开发体验兼顾的脚手架。其主要特性包括：
1. **一键启用 Fabric 渲染管线**
- 默认集成 Fabric，自动配置 C++ 层 Shadow Tree、Yoga 布局与 JSI 绑定，极大提升渲染性能与并发能力。
2. **TurboModules 支持**
- 内置 TurboModule 框架，JS 端通过 JSI 直接调用原生模块，无需 JSON 序列化，调用延迟大幅降低。
- 提供自动化生成模板，让你只需少量配置即可新增原生模块。
3. **Hermes 引擎优化**
- 默认开启 Hermes，兼容 Android 与 iOS，让 JS 代码启动更快、内存占用更低。
- 内置性能剖析脚本，可在调试阶段自动生成采样报告。
4. **TypeScript + ESLint + Prettier 预配置**
- 全面支持 TypeScript，结合 `tsconfig.json`、`eslint`、`prettier` 等最佳实践配置，保证代码一致性。
- 自带常见规则：React Hooks 检测、导入排序、变量命名规范等，让团队协作更高效。
5. **React Navigation v6 与底层架构融合**
- 内置 `@react-navigation/native`、`@react-navigation/stack`，并对 Fabric 做了适配，页面跳转更流畅。
- 提供示例导航结构，包含常用鉴权流程、Tab 导航、Drawer 导航。
6. **自动化 Android / iOS 构建配置**
- iOS 自动安装 Pod，Android 自动配置 `gradle.properties` 与 `build.gradle`，一键打包即可发布。
- 支持 CI/CD 集成，预置 Fastlane 配置，可快速接入自动化发布流程。
---
## 二、快速上手：安装与初始化
### 2.1 环境要求
- Node.js ≥ 14
- Yarn ≥ 1.22（建议）
- React Native CLI
- Android Studio / Xcode
- 全局安装 `react-native-turbo-starter-cli`（可选）
### 2.2 安装 Turbo Starter
通过 **npm** 或 **Yarn** 安装全局脚手架：
```bash
# 使用 Yarn
yarn global add react-native-turbo-starter-cli
# 或者 npm
npm install -g react-native-turbo-starter-cli说明：脚手架包名为 react-native-turbo-starter-cli，在正式使用前需保证无网络缓存冲突。2.3 初始化项目
执行以下命令创建一个名为 MyTurboApp 的新项目：
turbo-starter init MyTurboApp
cd MyTurboApp脚手架会自动完成以下步骤：
- 克隆预置模板仓库：包含 Fabric、TurboModules、Hermes、TS、ESLint 等配置。
- 安装依赖：
node_modules、Pods（iOS）、Gradle 插件（Android）。 - 生成 Android
app/build.gradle与 iOSPodfile中与 TurboModules / Fabric 相关配置。 - 配置
tsconfig.json、.eslintrc.js、prettier.config.js等。 在
package.json中添加常用脚本：yarn android：编译并运行 Android 模拟器 / 设备。yarn ios：编译并运行 iOS 模拟器 / 设备。yarn lint：执行 ESLint 检查。yarn type-check：执行 TypeScript 类型检查。yarn start:perspective：启动 Hermes 采样剖析模式。
初始化成功示例：
✔ Cloned template repository ✔ Installed npm dependencies ✔ Installed iOS Pods ✔ Configured Android Gradle settings ✔ Initialized TypeScript & ESLint config Project “MyTurboApp” has been created successfully!
三、核心技术解析：Fabric、TurboModules、Hermes
要真正理解 Turbo Starter 的优势，必须先掌握其底层技术栈：Fabric 渲染管线、TurboModules 以及 Hermes 引擎。
3.1 Fabric 渲染管线
Fabric 是 RN 0.62+ 引入的全新渲染架构，将 Shadow Tree 与布局逻辑下沉到 C++ 层，带来更低延迟与并发渲染能力。Turbo Starter 已预先为你配置好 Fabric 环境，以下是核心流程示意：
JS 线程 C++ 层 (Fabric) 原生 UI 线程
│ │ │
│ React Fiber Reconciler │ │
│ - Diff 新旧组件树 │ │
│ - 生成布局指令、UI 操作队列 │ │
│ (JS 调用 FabricUIManager.jsi) │ │
│─────────────────────────────────▶│ │
│ │ Fabric C++ Shadow Tree 渲染 │
│ │ - 构建 & 更新 ShadowNode │
│ │ - 调用 Yoga 计算布局 │
│ │ - 生成 View 操作列表 │
│ │────────────────────────────────▶│
│ │ │ 原生 队列入栈
│ │ │ - createView / updateView / removeView
│ │ │ - Layout & 绘制
│ │ │
│ │◀──────────────────────────────── │
│ JS 线程可并发调度 (Concurrent) │ │- ShadowNode C++ 实现：Fabric 下的
WebUISingleThreadComponentDescriptor、ConcreteComponentDescriptor等在 C++ 中维护组件树状态。 - JSI 绑定：Turbo Starter 通过
@react-native/fabric包将FabricUIManager作为 Host Object 暴露给 JS，使得updateProps、dispatchCommand等调用在 V8/JSI 上下文中同步执行。 - 布局与渲染：一旦 Shadow Tree 建立或更新，C++ 层会调用 Yoga 计算
x, y, width, height，然后生成最小化的 “UI Block” 列表，直接下发给原生端，减少了 JSON 序列化。
示例：JS 端调用 Fabric 更新
import { FabricUIManager } from '@react-native/fabric'; // 创建一个新的 ShadowNode const tag = FabricUIManager.createNode( 'View', // hostType { style: { flex: 1, backgroundColor: '#FFF' } }, // props 0, // surfaceId (根组件 id) ); // 更新属性 FabricUIManager.updateNode( tag, { style: { flex: 1, backgroundColor: '#F00' } }, // 新 props ); // 提交变更 FabricUIManager.dispatchViewUpdates(surfaceId);
3.2 TurboModules
在旧架构中，RN 通过 Bridge（JSON 序列化/反序列化）调用原生模块，开销较大。TurboModules 则使用 JSI HostObject/HostFunction，将原生模块“直接挂到 JS 引擎”上，省去了多次上下文切换。
- JSI HostObject：一旦应用启动，Turbo Starter 会自动注册所有实现了
TurboModule接口的原生类，将其绑定到global.TurboModules对象下。 - 按需加载：首次调用
NativeModules.MyModule.doSomething()时，Turbo Starter 会在 C++ 层加载并实例化该模块，其后调用直接通过指针访问，极大降低调用延迟。 示例：创建自定义 TurboModule（以 Android 为例）
实现 Java 接口
// android/app/src/main/java/com/myapp/MyTurboModule.java package com.myapp; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.turbomodule.core.interfaces.TurboModule; import com.facebook.react.turbomodule.core.interfaces.ReactModule; import javax.annotation.Nonnull; @ReactModule(name = MyTurboModule.NAME) public class MyTurboModule implements TurboModule { public static final String NAME = "MyTurboModule"; private ReactApplicationContext reactContext; public MyTurboModule(@Nonnull ReactApplicationContext reactContext) { this.reactContext = reactContext; } @ReactMethod(isBlockingSynchronousMethod = true) public String getDeviceNameSync() { return android.os.Build.MODEL; } @ReactMethod public void showToast(String msg) { Toast.makeText(reactContext, msg, Toast.LENGTH_SHORT).show(); } }配置
MyTurboModulePackage// android/app/src/main/java/com/myapp/MyTurboModulePackage.java package com.myapp; import com.facebook.react.turbomodule.core.TurboReactPackage; import com.facebook.react.turbomodule.core.interfaces.TurboModule; import java.util.Collections; import java.util.List; public class MyTurboModulePackage extends TurboReactPackage { @Override public List<TurboModule> getModules(ReactApplicationContext reactContext) { return Collections.<TurboModule>singletonList(new MyTurboModule(reactContext)); } @Override public ReactModuleInfoProvider getReactModuleInfoProvider() { return new ReactModuleInfoProvider() { @Override public Map<String, ReactModuleInfo> getReactModuleInfos() { final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>(); moduleInfos.put( MyTurboModule.NAME, new ReactModuleInfo( MyTurboModule.NAME, "MyTurboModule", false, // canOverrideExistingModule false, // needsEagerInit true, // hasConstants false, // isCxxModule true // isTurboModule ) ); return moduleInfos; } }; } }注册到
MainApplication.java// android/app/src/main/java/com/myapp/MainApplication.java @Override protected List<ReactPackage> getPackages() { List<ReactPackage> packages = new PackageList(this).getPackages(); // 添加 TurboModulePackage packages.add(new MyTurboModulePackage()); return packages; }JS 端调用示例
// App.tsx import React, { useEffect } from 'react'; import { Button, View, Text } from 'react-native'; import { NativeModules } from 'react-native'; const { MyTurboModule } = NativeModules; export default function App() { const [deviceName, setDeviceName] = useState<string>(''); useEffect(() => { // 同步调用 const name = MyTurboModule.getDeviceNameSync(); setDeviceName(name); }, []); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>设备名称：{deviceName}</Text> <Button title="显示 Toast" onPress={() => MyTurboModule.showToast('Hello from TurboModule!')} /> </View> ); }
通过上面步骤，我们实现了一个同步（阻塞）方法 getDeviceNameSync 与异步方法 showToast。JS 侧无须等待异步回调即可同步获取设备名称，提升了性能与开发体验。
3.3 Hermes 引擎
Hermes 是 Facebook 针对 React Native 优化的轻量 JavaScript 引擎，启动快、内存占用低。Turbo Starter 默认在 Android 和 iOS 上启用 Hermes：
# android/app/build.gradle
project.ext.react = [
+ enableHermes: true, // 启用 Hermes
entryFile: "index.js"
]优势
- 首包启动时间比 JSC 快约 30%–40%。
- 生成的 Hermes Bytecode 可以通过
hermesc预编译，减少运行时解析成本。 - 较低的内存占用，适合低端设备。
调试与剖析
Turbo Starter 中集成了
hermes-engineProfiler，只需运行：yarn start:perspective即可生成
.cpuprofile文件，使用 Chrome DevTools 打开进行深度性能剖析。
四、项目目录与模块组织
初始化完成后，Turbo Starter 会生成如下目录结构（精简示例）：
MyTurboApp/
├── android/ # 原生 Android 项目
│ ├── app/
│ ├── build.gradle
│ └── settings.gradle
├── ios/ # 原生 iOS 项目
│ ├── Pods/
│ ├── MyTurboApp.xcworkspace
│ └── MyTurboApp.xcodeproj
├── src/
│ ├── assets/ # 图片、icon、字体等静态资源
│ ├── components/ # 通用 UI 组件
│ │ ├── Button.tsx
│ │ └── Header.tsx
│ ├── navigation/ # React Navigation 配置
│ │ ├── AppNavigator.tsx
│ │ └── screens.ts
│ ├── modules/ # 与 TurboModules 绑定的 JS 接口封装
│ │ └── MyTurboModule.ts
│ ├── screens/ # 各功能页面
│ │ ├── HomeScreen.tsx
│ │ └── DetailScreen.tsx
│ ├── services/ # 网络请求、API 封装
│ │ └── api.ts
│ ├── stores/ # 状态管理 (Redux / MobX / Recoil 等)
│ │ └── UserStore.ts
│ ├── styles/ # 公共样式、主题配置
│ │ └── theme.ts
│ ├── utils/ # 工具函数
│ │ └── helpers.ts
│ ├── App.tsx # 入口组件，挂载 NavigationContainer
│ └── index.js # 应用注册入口
├── .eslintrc.js # ESLint 配置
├── tsconfig.json # TypeScript 配置
├── babel.config.js # Babel 配置，包含 Fabric & TurboModules 插件
└── package.jsoncomponents/：存放应用通用的 UI 组件，皆使用纯函数或 React.memo 进行优化。navigation/：使用 React Navigation v6，AppNavigator.tsx定义Stack.Navigator、Tab.Navigator、Drawer.Navigator等。modules/：在 TS 中为每个 TurboModule 创建类型定义与 JS 接口封装，方便在业务代码中调用。stores/：可根据团队技术选型使用 Redux、MobX 或 Recoil等，一切基于 TypeScript 严格类型。services/：集中封装网络请求、业务 API 与缓存逻辑，供屏幕或组件调用。styles/：定义主题色、字体大小、间距统一规范，便于应对深色模式等需求。
五、示例代码：快速创建首页与自定义 TurboModule
下面以一个最常见的“Home → Detail”导航示例，以及如何在页面中调用自定义 TurboModule（如上文的 MyTurboModule）来展示数据。
5.1 配置导航
首先，安装 React Navigation 及其依赖（Turbo Starter 已预置，仅供参考）：
yarn add @react-navigation/native @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context创建 src/navigation/AppNavigator.tsx：
// src/navigation/AppNavigator.tsx
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';
export type RootStackParamList = {
Home: undefined;
Detail: { itemId: number; name: string };
};
const Stack = createStackNavigator<RootStackParamList>();
export default function AppNavigator() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: { backgroundColor: '#6200EE' },
headerTintColor: '#FFF',
}}
>
<Stack.Screen name="Home" component={HomeScreen} options={{ title: '首页' }} />
<Stack.Screen name="Detail" component={DetailScreen} options={{ title: '详情页' }} />
</Stack.Navigator>
);
}在 src/App.tsx 中挂载：
// src/App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './navigation/AppNavigator';
export default function App() {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}5.2 创建 HomeScreen
// src/screens/HomeScreen.tsx
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../navigation/AppNavigator';
import { useNavigation } from '@react-navigation/native';
import { NativeModules } from 'react-native';
type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
export default function HomeScreen() {
const navigation = useNavigation<HomeScreenNavigationProp>();
const { MyTurboModule } = NativeModules;
const handleNavigate = () => {
navigation.navigate('Detail', { itemId: 42, name: 'Turbo Starter' });
};
const handleGetDeviceName = () => {
// 调用同步 TurboModule 方法
const deviceName = MyTurboModule.getDeviceNameSync();
alert(`设备名称：${deviceName}`);
};
return (
<View style={styles.container}>
<Text style={styles.title}>欢迎使用 Turbo Starter 框架</Text>
<Button title="跳转到详情页" onPress={handleNavigate} />
<View style={styles.spacer} />
<Button title="获取设备名称 (TurboModule)" onPress={handleGetDeviceName} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
title: { fontSize: 24, fontWeight: 'bold', marginBottom: 24, textAlign: 'center' },
spacer: { height: 16 },
});5.3 创建 DetailScreen
// src/screens/DetailScreen.tsx
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { RouteProp, useRoute, useNavigation } from '@react-navigation/native';
import { RootStackParamList } from '../navigation/AppNavigator';
import { StackNavigationProp } from '@react-navigation/stack';
type DetailScreenRouteProp = RouteProp<RootStackParamList, 'Detail'>;
type DetailScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Detail'>;
export default function DetailScreen() {
const route = useRoute<DetailScreenRouteProp>();
const navigation = useNavigation<DetailScreenNavigationProp>();
const { itemId, name } = route.params;
return (
<View style={styles.container}>
<Text style={styles.text}>项目编号：{itemId}</Text>
<Text style={styles.text}>项目名称：{name}</Text>
<View style={styles.spacer} />
<Button title="返回上一页" onPress={() => navigation.goBack()} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
text: { fontSize: 18, marginBottom: 12 },
spacer: { height: 16 },
});到此，我们已经完成了一个最基本的“首页 → 详情页”导航，并演示了如何调用自定义的 TurboModule 获取设备名称。所有导航和模块调用均在 Fabric + TurboModules + Hermes 的优化下高效运行。
六、架构图解与数据流示意
为了帮助你更直观地理解 Turbo Starter 的整体架构与数据流，下面给出一个 ASCII 图示，展示 JS 线程、C++ Fabric、TurboModules 与原生 UI 线程之间的交互。
┌─────────────────────────────────────────────────────────────────────────┐
│ JS 线程 (Hermes) │
│ │
│ App.tsx (React Fiber) │
│ ├─ useEffect → MyTurboModule.getDeviceNameSync() (Sync Call) │
│ │ → JSI HostFunction (C++) │
│ │ │
│ ├─ React Navigation (Home → Detail) │
│ │ → RCNavigtor JSI 调用 FabricUIManager (创建 / 更新页面 Element) │
│ │ │
│ └─ 普通业务逻辑 (组件状态更新) → 调用 React 更新 Fiber → 调度 Fabric 渲染 │
│ │
│ │ │ │
│ JSI 绑定 / HostFunction JSI 绑定 / HostObject │
│ ▼ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ C++ 层 (Fabric + TurboModules) │ │
│ │ │ │
│ │ FabricUIManager TurboModuleManager │
│ │ ├─ ShadowNode 树管理 ├─ 管理 MyTurboModule 捆绑 │
│ │ ├─ 调用 Yoga 计算布局 │ │
│ │ ├─ 生成 UI Operations （createView/updateView/removeView） │ │
│ │ ├─ dispatchViewUpdates 将操作列表发送给原生 UI 线程 │ │
│ │ └─ 接收 JS 侧同步调用 (getDeviceNameSync → Android Build.MODEL) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │ │
│ │ Fabric UI Ops │ TurboModule 返回数据 │
│ ▼ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 原生 UI 线程 (Android / iOS) │ │
│ │ ├─ 执行 createView / updateView / removeView 操作 │ │
│ │ ├─ 原生组件渲染 (UIView / ViewGroup) │ │
│ │ ├─ 接收用户触摸事件 → 传回 JS 线程 (JSI / Bridge) │ │
│ │ └─ 原生 TurboModule 直接暴露方法 (getDeviceNameSync、showToast) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘- JS 线程：JSX 语法构建虚拟 DOM，React Fiber 调用 JSI 将更新指令直接发送给 Fabric UI Manager 或 TurboModule Manager。
- C++ 层 (Fabric + TurboModules)：Fabric 负责 ShadowNode 标记、布局计算与生成 “原生 UI 操作列表”；TurboModuleManager 维护所有原生模块实例，将自身 HostObject 暴露给 JS，支持同步与异步调用。
- 原生 UI 线程：接收 Fabric 下发的操作列表，依次调用
createView、updateView或removeView；同时，原生 TurboModule 方法（如getDeviceNameSync、showToast）直接被 JSI 调用并返回结果。
整个链路中省略了大量 JSON 序列化开销，JS 与 C++ 在同一进程内通过共享指针通信，从而显著提升性能与响应速度。
七、性能优化与实战建议
即便 Turbo Starter 集成了最前沿的技术，开发者在实际项目中依然需注意以下几项优化建议，以确保应用在不同设备环境下都能拥有流畅体验。
7.1 合理拆分组件与避免无效重渲染
- 使用
React.memo、useMemo、useCallback减少重复渲染。 - 对于大型列表，优先使用
FlatList并配置getItemLayout、windowSize、initialNumToRender等属性。 - 利用
useTransition（React 18+ 并发）将次要更新（如后台数据加载）标记为可延迟，避免阻塞用户交互。
7.2 精简原生模块调用
- 虽然 TurboModules 使得调用原生模块非常高效，但如果在渲染循环中频繁调用，也可能造成瓶颈。
- 尽量将一组操作合并为单次调用，例如：一次性获取多个设备信息，而不是多次同步调用。
7.3 利用 Hermes Profiler 做深度剖析
运行命令：
yarn start:perspective生成
.cpuprofile文件，使用 Chrome DevTools → Performance 面板打开，查看堆栈采样结果。- 重点关注：JS 侧长时间运行的函数、布局与渲染瓶颈、频繁触发的 JSI 调用等。
7.4 关注内存泄漏与资源回收
- 在使用大型图片、音视频等资源时，要及时释放引用，避免 OOM。
- 对于定时器（
setInterval、requestAnimationFrame）的引用要在组件卸载时清除。 - 尽量使用弱引用（
WeakMap/WeakSet）管理缓存数据，避免持久化引用导致内存无法释放。
7.5 持续更新依赖与测试
- React Native 及其底层依赖（Fabric、TurboModules、Hermes）还处于快速迭代阶段，保持脚手架依赖与 RN 版本同步。
- 定期阅读官方 Release Notes，及时迁移已废弃 API。
- 在 Android 与 iOS 真机上均做性能与兼容测试，尤其关注低端机型与旧系统版本。
八、总结与拓展
本文从零开始介绍了 React Native Turbo Starter，并通过代码示例与架构图解详细讲解了其中的关键技术点，包括 Fabric 渲染管线、TurboModules 调用方式、Hermes 引擎优化、项目目录组织、导航实例、原生模块封装等内容。以下几点可帮助你继续深入：
阅读 Fabric 源码
- 在
node_modules/react-native/ReactFabric或 RN 源码仓库的ReactCommon/fabric目录下查阅 C++ 实现，了解 ShadowNode、ComponentDescriptor、EventPipeline 等细节。
- 在
研究 TurboModule 架构
- 关注
ReactCommon/turbomodule/core、ReactNativeHost中getTurboModuleManager的生成逻辑，掌握自动生成原生模块绑定流程。
- 关注
实践并发特性
- 在 React 18 并发模式下，配合 Turbo Starter 进行
startTransition、useDeferredValue等 API 的实验，观察在 Fabric 管线下的渲染差异。
- 在 React 18 并发模式下，配合 Turbo Starter 进行
参与社区与贡献
- Turbo Starter 虽然功能丰富，但仍处于快速发展阶段，欢迎提 Issue、PR 或参与文档撰写，与社区共同完善脚手架。
通过本文的示例与思路，你已经可以快速上手 Turbo Starter 框架，并创建一个具备高性能、可扩展、易维护的 React Native 项目。后续可根据自身业务需求，结合 Redux、MobX、Recoil、React Navigation 等技术栈，进一步构建完整的移动应用。