从零开始用 React Native 构建你的第一个 APP：实战经验分享
开篇：为什么我会写这篇文章？
作为一名移动开发工程师，我已经有五年的开发经验了。在这几年里，我参与过多个 Android 和 iOS 的原生项目，也尝试过多种跨平台框架，比如 Flutter、Ionic，还有 Xamarin。但真正让我产生“这就是我想要的”那种感觉的技术，还是 React Native。
记得第一次接触 React Native 是在公司要快速开发一个内部使用的运营工具时。当时的项目时间紧任务重，产品还希望能在 Android 和 iOS 同时上线，团队又没有足够的人力同时维护两套代码库。于是我们选择了 React Native，结果超出了预期——不仅如期上线，而且后续的迭代速度也比原生快了不少。
今天这篇文章，我想结合我的实际经历，手把手带你从零开始构建你的第一个 React Native 应用，并且不是走马观花地跑个 demo，而是真正落地、能发布的应用。过程中遇到的问题和踩过的坑，我也会毫无保留地分享出来。
背景与挑战：我们的第一个 React Native 项目
项目背景
我们公司当时要做一个面向内部销售人员的 App，主要功能包括：
- 查看客户信息
- 提交订单
- 审批流程状态跟踪
因为是内部使用，所以设计相对简单，也不需要复杂的动画或图形效果。重点在于快速上线，跨平台支持，以及后期维护方便。
作为技术负责人，我最终决定采用 React Native 来搭建这个 App。这是我第一次主导一个 RN 项目，虽然之前有过一些 demo 经验，但真正的生产环境实践还是头一回。
遇到的问题和挑战
- 环境搭建不顺利：初学者对 Node.js、npm、iOS 模拟器这些依赖不太熟悉，常常出错。
- iOS 适配问题频出：特别是刘海屏、安全区域等问题处理起来比较繁琐。
- 模块缺失/版本冲突：有些第三方库只支持某几个版本，稍有不慎就导致 app 崩溃。
- 发布上架 App Store 的流程不熟悉：签名、打包、上传都是一道门槛。
- 性能优化经验不足：React Native 不像原生那样轻量，滑动卡顿、启动慢等问题都需要调优。
这些问题看似普通，但在初期确实让我们走了不少弯路。
技术选型与方案设计
1. 技术栈选择
- 主体框架：React Native（版本 0.68）
- 状态管理：Redux + Redux Toolkit（轻量化推荐）
- 导航组件：React Navigation（Stack、Tab、Drawer 组合使用）
- UI 框架：NativeBase（节省自己写样式的时间）
- 接口调用：axios + async/await
- 构建与部署：Fastlane for iOS，Gradle for Android
2. 项目结构划分
一开始我也犯了个常见的错误，把所有页面和逻辑塞在一个文件里。后来经过重构，按照下面的方式组织代码：
/src
├── assets // 图片资源
├── components // 可复用组件
├── config // 环境配置等
├── screens // 页面视图
├── services // 接口请求封装
├── store // Redux 状态管理
├── utils // 工具函数
└── App.js // 入口文件
这种结构清晰，后期协作开发也很方便。
实战编码：构建第一个 APP 功能
为了更贴近实战，这里我就以我们项目的登录页为例，讲讲怎么一步步搭起来。
第一步：初始化项目
npx react-native init SalesApp --version 0.68.0
cd SalesApp
npm install
初期不要盲目升级到最新版 RN，建议保持稳定版本，避免兼容性问题
第二步：安装必要依赖
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-get-random-values
npm install @react-navigation/native-stack
npm install native-base@next
npm install axios
第三步：创建登录页面组件
src/screens/LoginScreen.js
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import axios from 'axios';
const LoginScreen = ({ navigation }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = async () => {
try {
const res = await axios.post('https://api.example.com/login', {
username,
password,
});
if (res.data.success) {
navigation.navigate('Dashboard');
}
} catch (error) {
alert('登录失败，请检查账号密码');
}
};
return (
<View style={styles.container}>
<TextInput
placeholder="用户名"
value={username}
onChangeText={setUsername}
style={styles.input}
/>
<TextInput
placeholder="密码"
secureTextEntry
value={password}
onChangeText={setPassword}
style={styles.input}
/>
<Button title="登录" onPress={handleLogin} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
input: {
borderBottomWidth: 1,
marginBottom: 15,
padding: 10,
},
});
export default LoginScreen;
第四步：配置导航器
App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './src/screens/LoginScreen';
import DashboardScreen from './src/screens/DashboardScreen';
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
<Stack.Screen name="Dashboard" component={DashboardScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
踩坑经验分享：那些年我掉过的坑
坑点1：iOS模拟器启动失败
刚开始的时候，react-native run-ios 一直报错，提示找不到设备。查了好久发现是因为电脑上安装的 Xcode 没有正确授权，或者没有默认设置 iPhone 设备。解决方式如下：
sudo xcode-select --switch /Applications/Xcode.app
xcodebuild -list
然后手动打开 Xcode 新建一个空项目，让它生成 simulator devices。
坑点2：Android 打包 APK 无法运行
我们在 CI 上打包 release 版本后，在测试机上运行直接崩溃。最后发现是忘记配置 proguard-rules.pro 导致某些类被混淆掉了。记得在 android/app/proguard-rules.pro 中添加以下规则：
-keep class com.facebook.react.** { *; }
-keep class com.myapp.** { *; }
坑点3：第三方库版本不一致
RN 对第三方库版本非常敏感，尤其是依赖中包含 Objective-C 或 Java 模块的情况。例如，我们曾经用过 react-native-firebase，后来升级 RN 版本之后必须同步升级对应的 Firebase 插件版本，否则编译失败。
建议：使用 npm ls [package-name] 查看依赖树，尽量使用社区活跃度高的库，避免“孤儿库”。
性能与用户体验优化
1. 启动页优化
React Native 默认启动会有明显的白屏或黑屏，这严重影响用户体验。我们通过以下方式做了优化：
- 使用
react-native-splash-screen插件隐藏启动画面直到 JS bundle 加载完成 - 在 iOS 和 Android 中分别配置启动图（Launch Screen）
2. 列表滚动性能提升
初期我们使用 FlatList 展示大量数据列表，但滑动卡顿严重。后来进行了以下调整：
- 设置
initialNumToRender控制首屏渲染数量 - 使用
keyExtractor明确每一项的 key - 将不必要的复杂计算移出 renderItem 函数
3. 内存泄漏检测
用 Flipper + React DevTools 监控内存占用和组件卸载情况。特别是在使用定时器或订阅事件时，务必在组件 unmount 时清除资源。
应用发布与上架体验
iOS 发布流程
- 在 Xcode 中设置 Team ID
- 创建 Distribution 证书和 Provisioning Profile
- 打包命令：
npx react-native bundle --entry-file='index.js' \
--bundle-output='./ios/main.jsbundle' \
--platform='ios' \
--assets-dest='./ios' \
--dev=false
cd ios
xcodebuild archive -workspace SalesApp.xcworkspace -scheme SalesApp -archivePath ./SalesApp.xcarchive
xcodebuild -exportArchive -archivePath ./SalesApp.xcarchive -exportPath ./SalesApp -exportOptionsPlist export.plist
- 使用 Application Loader 上传到 App Store Connect
Fastlane 自动化发布（推荐）
对于频繁更新的应用，我们使用了 Fastlane 实现自动打包和上传，极大提升了效率。
lane :beta do
increment_build_number
build_app(workspace: "SalesApp.xcworkspace", scheme: "SalesApp")
upload_to_testflight
end
成果与反思
整个项目前后花了不到两周时间就完成上线，团队成员反馈开发效率明显提高。后续在迭代过程中，也验证了 React Native 的稳定性。特别是在 Android 端表现良好，iOS 端偶尔会有一些渲染细节的小问题，但都能找到解决方案。
从个人角度来说，这次项目让我彻底摆脱了“RN不适合做正式APP”的偏见。虽然它不能完全替代原生开发，但对于大多数应用场景来说，完全可以胜任。
给新手的几点建议
- 别一开始就追求完美架构：先跑通核心功能最重要，架构可以在后续迭代中完善。
- 多参考优秀开源项目：如 Wix 的 RN-Navigation，或者 Expo 社区项目。
- 注意热更新策略：如果你打算支持热修复，建议集成 CodePush 或类似的模块。
- 尽早接入性能监控：比如 Sentry 或 Bugsnag，有助于定位线上 bug。
- 文档很重要：尤其多人协作时，规范命名和注释可以减少沟通成本。
结语：RN 是未来吗？
React Native 走过了早期的不稳定阶段，如今已经非常成熟。随着 Facebook 改进架构（如 Fabric、TurboModules）、Apple 支持原生线程通信、社区生态日益丰富，我认为 RN 依然是跨平台移动开发的首选之一。
无论是创业者想快速验证产品原型，还是企业需要降本增效，React Native 都是一个值得尝试的方向。
如果你也在考虑入坑 RN，或者正在入门阶段，欢迎留言交流。希望这篇文章能帮你少走点弯路，快速上手你人生中的第一个 RN 项目！🚀
评论 0