React Native快速入门：构建你的第一个APP
从0到1，我在公司用React Native开发第一个APP的那些事儿
最近在团队里接手了一个内部小工具的开发任务，需要为运营同事打造一个数据展示类的移动端应用。考虑到产品生命周期不长、需求简单且有跨平台需求，我决定尝试使用 React Native 来快速实现原型上线。
作为一个主要写原生 Android 的开发者，这是我第一次正式将 React Native 引入到项目中，整个过程充满挑战也收获颇多。今天就和大家聊聊我是如何一步步搞定第一个 RN 项目的。
背景：为什么选择React Native？
我们项目的需求其实很简单：提供几个页面展示接口返回的数据，比如今日订单数、用户活跃趋势等，同时要支持权限管理和简单的筛选交互。功能本身不多，但产品经理希望“iOS 和 Android 都要有”。
之前我们做这种双端小需求，要么是分别让两组人各写一套（太费人力），要么用 Cordova 做 WebApp（体验差），这次我想试试 React Native —— 毕竟 Facebook 官方背书，社区活跃，而且写过 JS 的同学上手应该也快。
真实遇到的问题
刚开始一切看起来很顺利，用 npx react-native init 初始化项目很快，跑起来个 demo 页面也没啥问题。但真正开始开发后才慢慢踩了不少坑：
- 样式适配问题：同样的 flex 布局，在 iOS 上显示正常，Android 却歪了
- 导航栏配置复杂：React Navigation 学习成本有点高，文档更新频繁，例子有时还对不上最新版
- 接口调用异常处理不统一：不同页面调用 REST API 的错误提示五花八门，后期很难维护
- 冷启动慢 + 打包体积大：调试时感觉启动慢，打出来的 release 包比预期的大很多
- 发布流程繁琐：Google Play 和 App Store 的签名打包流程对我来说几乎全新
我的解决思路和关键代码实践
一、项目结构设计
为了后续维护方便，我把项目按功能模块组织成类似这样：
src/
├── components/ // 公共组件
├── screens/ // 页面目录
├── utils/ // 工具函数
├── services/ // 接口服务
├── assets/ // 图片资源
└── App.js // 主入口
这种划分让我在团队协作的时候也能清楚地知道去哪里找对应的文件。
二、统一接口封装
针对接口异常问题，我抽离出一个 service 文件来集中管理：
// src/services/api.js
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://api.example.com/v1',
timeout: 5000,
});
export const getOrders = async () => {
try {
const response = await apiClient.get('/orders');
return response.data;
} catch (error) {
console.error('API Error:', error);
throw new Error('网络请求失败，请稍后再试');
}
};
然后在各个页面统一调用，并配合 Toast 显示通用的提示信息。
三、导航跳转管理
用的是最新的 react-navigation v6：
npm install @react-navigation/native
npm install @react-navigation/native-stack
在主 App.js 中初始化堆栈导航器：
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 App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
这个结构清晰又容易扩展，后面加页面也不会混乱。
踩坑经验分享
1. Flex 布局表现差异
React Native 的 Flexbox 在两个平台上的表现略有差异，尤其是 flexWrap 或 alignItems 不对齐的时候特别明显。
解决方法：对于一些重要布局，我会手动给 Android 和 iOS 分别加样式后缀文件，例如：
components/Header.js
components/Header.styles.js
components/Header.ios.js
components/Header.android.js
这样可以分别写平台专属样式。
2. 冷启动优化建议
早期项目打包出来的 APK 还没压缩，首屏加载动不动就卡住几秒。后来我们做了几点优化：
- 使用 Hermes 引擎提升执行速度（仅限 Android）
- 启用了 Flipper 调试工具简化日志输出
- 把图片资源全部用 webp 格式压缩了一波
- 打包前开启 Metro 的压缩插件：
metro-minify-terser
3. 发布之路不易
AppStore 自动审核两次都被拒，原因居然是没有明确说明使用 Apple Sign In 的场景 —— 实际没用这个，但系统检测误以为用了。
还有 Android 的 targetSdkVersion 没改到 34，也被 Play Console 抱怨了好几次。后来把这些都列成了检查清单，确保不会再出错。
最终效果与收益
尽管一开始有点磕绊，但最终我们只用了大约 3 周时间就把 App 上线了双平台，节省了差不多一周的人力。产品经理也挺满意 UI 的完成度，因为组件库我们选的是 React Native Paper，既美观又省事。
更关键的是，后续迭代变得非常轻松，一次修改两端同步生效，连测试人员都说效率更高了。
给新手的一些建议
如果你也想入门 React Native，我有几个实用小建议：
- 先学好 JavaScript 基础，特别是 ES6 语法和异步编程；
- 不要一开始就纠结 Expo 还是 CLI，CLI 更适合熟悉原生构建流程的同学；
- 样式部分多查文档，React Native 的样式系统跟网页的不太一样；
- 调试工具很重要，Chrome DevTools 和 Flipper 是必备神器；
- 遇到报错先看 Metro 控制台，大多数时候它能告诉你哪一行出了问题；
- 别怕翻 GitHub Issues，很多常见问题都有现成解决方案；
- 多参考开源项目，像 Airbnb、Wix 那些公司的 RN 项目都是很好的学习材料。
结语：技术只是手段，解决问题才是根本
回过头来看，这次尝试 React Native 开发的过程虽然不算一帆风顺，但也让我对前端生态有了更深理解。现在回想起刚进公司那会儿只会写 Java 的日子，真的觉得自己成长不少。
React Native 并不是万能的银弹，但在某些合适的业务场景下确实能让我们开发得更快、维护得更好。而更重要的是，它帮助我们在有限的资源内，把事情做得更高效。
如果你正准备迈入 React Native 的世界，希望这篇实战笔记能帮你少走一点弯路，祝你码出精彩！
评论 0