从0到1：用React Native快速开发你的第一个APP

开篇：为什么是React Native？

去年年初，我刚加入一家初创公司，我们团队负责打造一款内部使用的员工协作工具。当时项目需要尽快上线MVP版本，并且要同时支持iOS和Android平台。作为技术负责人，我必须在短时间内选型合适的技术栈。

考虑到团队中前端开发者居多，且有Web开发经验，我最终选择了React Native。虽然我之前没怎么正式用过它，但凭借对React的熟悉程度，加上社区的强大生态，我相信这是一个可以快速上手、高效交付的选择。

这篇文章就以这段亲身经历为基础，带你从零开始搭建一个简单的React Native应用，分享我在过程中踩过的坑、踩出的经验，以及一些实用建议。

---

背景与挑战

我们的目标很简单：开发一个员工签到打卡的小程序，功能包括：

• 用户登录（模拟）
• 实时显示当前位置（定位）
• 签到按钮（带状态提示）
• 历史记录页面（展示过去7天的签到情况）

时间紧任务重，我们需要在两周内完成跨平台开发并发布到测试环境。

遇到的几个主要问题：

1. 如何处理安卓和iOS的差异？
2. 如何集成原生模块比如地理位置权限？
3. 性能优化怎么做？有没有卡顿或白屏的问题？
4. 打包构建过程复杂吗？怎么发布到App Store和Google Play？

接下来我就结合这个真实项目，一步步告诉你我是怎么解决这些问题的。

---

技术选型与实现思路

我们决定使用 React Native 官方推荐的方式 —— Expo CLI 初始化项目。Expo 提供了很多开箱即用的能力，特别适合快速启动中小型项目。

💡 Tip：如果是大型项目或者需要深度定制原生逻辑，建议直接用 react-native init 来创建原生项目。

我们项目的主要技术栈如下：

• React Native：核心框架
• Expo SDK：快速访问设备能力（相机、定位、相册等）
• React Navigation 6.x：页面导航
• Redux Toolkit：状态管理（轻量级数据共享）
• TypeScript：提高代码稳定性
• Firebase Firestore：云端数据存储（用于保存签到记录）

---

项目搭建与代码实践

初始化项目

npx create-expo-app rn-signin-app
cd rn-signin-app
npm start

这样就可以运行起一个空项目了。你可以选择通过手机端的 Expo Go App 扫描二维码实时预览。

登录页设计

我们做了一个简单的登录页，用户点击“登录”后跳转主页。这里用了 React Navigation：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

获取位置信息

这里用了 Expo 的 Location 模块：

import * as Location from 'expo-location';

async function getCurrentLocation() {
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    setError('Permission to access location was denied');
    return;
  }

  let location = await Location.getCurrentPositionAsync({});
  setLocation(location.coords);
}

⚠️ 注意 iOS 的隐私策略，你需要在 app.json 中添加描述：

{
  "ios": {
    "infoPlist": {
      "NSLocationWhenInUseUsageDescription": "我们需要获取您的位置以便打卡"
    }
  }
}

---

开发中的“大坑”总结

1. 真机调试黑屏 / 白屏

最开始我在真机上跑的时候，发现有时一加载就白屏。后来排查发现是因为某些依赖没有正确安装，或未配置好权限。

解决方式：

• 清理缓存重新安装：expo start -c
• 检查依赖是否完整，尤其是 native modules 相关的
• 如果用到了地图、相机等功能，务必在 info.plist 和 AndroidManifest.xml 中添加相应权限

2. 状态更新不及时导致 UI 不同步

这个问题在我写签到按钮状态变化时出现过。原本的逻辑是点击后调用 API 并更新 UI，结果因为异步操作的问题，UI 没有及时响应。

解决方案是使用 useState + useEffect 结合来处理副作用，确保状态变更后能触发重渲染：

const [isSignedIn, setIsSignedIn] = useState(false);

async function handleSignin() {
  const result = await api.signin();
  if (result) {
    setIsSignedIn(true);
  }
}

useEffect(() => {
  if (isSignedIn) {
    alert('签到成功！');
  }
}, [isSignedIn]);

3. 多平台适配问题

虽然 React Native 是跨平台的，但不同平台的表现依然存在差异：

• iOS 上默认字体比安卓小，布局需要适配
• 安卓返回键行为可能与 iOS 不一致
• 某些模块如 StatusBar、SafeAreaView 在不同系统下的表现不一样

我的做法是：

• 使用 Platform.select() 做差异化样式处理
• 尽量统一颜色、字体、按钮样式为项目自定义
• 测试阶段两个平台都装真机跑一遍

---

性能优化与用户体验

启动慢 & 白屏

这是 RN 项目的通病之一，特别是使用 Expo 时。我们做了几件事缓解这个问题：

• 在首页加了一个简单的 loading 页面（避免用户觉得卡住）
• 用 splash-screen 插件控制启动图的隐藏时机
• 减少首屏加载的数据请求，先展示基础UI再异步拉取

列表滚动卡顿

我们在历史签到页面用了 FlatList 展示七天数据，默认情况下滚动有些卡顿。

优化点：

• 对每一项组件使用 React.memo，减少重复渲染
• 给 FlatList 添加 removeClippedSubviews={true}
• 控制每项的高度和布局不要太复杂

图标与图片资源过大

刚开始我们直接用了 PNG 图片作为图标，打包后体积明显增加。于是改成 SVG 图标，用 react-native-svg + @svgr/cli 自动转换，大大减小了包体积。

---

构建与发布

构建APK/IPA

我们使用 Expo 提供的云构建服务：

expo build:android
# 或者打包 iOS
expo build:ios

会生成对应的 APK 或 IPA 文件，下载下来传给 QA 测试即可。

发布到应用商店

iOS 需要用 Apple Developer Account，把 ipa 包上传到 App Store Connect。注意证书、Provisioning Profile 这些细节容易出错，我被折腾得够呛 😂

Android 相对简单些，但也要准备好截图、描述、分类等信息。

⚠️ 记得提前申请好谷歌账号和苹果开发者账号，流程不能拖项目上线。

---

最终效果与反思

我们的签到APP在两周内完成了开发并顺利上线，初期用户反馈良好，功能稳定，跨平台一致性不错。后续我们也基于这套架构迭代了多个模块。

回顾这段经历，我觉得 React Native 在以下场景非常适用：

• 团队前端背景强，熟悉 React
• 需要快速验证产品逻辑，赶进度
• 功能不需要重度依赖原生库
• 预算有限，不想维护两套代码

不过如果你打算做一个性能要求极高、动画丰富或涉及大量原生交互的 APP，那还是原生开发更稳。

---

写给正在入门的你

React Native 的学习曲线其实并不陡峭，只要你懂 React，就能很快上手。以下是我在实践中总结的几点建议：

1. 从官方文档出发，别一开始就看第三方教程
   很多老文章已经过时了，React Native 发展太快，最新文档才是权威。

2. 优先使用社区高 star 的库
   比如 react-native-paper, react-navigation, lottie-react-native 等都是比较稳定的。

3. 尽早真机调试，越早越好
   模拟器永远代替不了真机，尤其是涉及到硬件权限时。

4. 合理使用 Expo，但也知道它的限制
   Expo 很方便，但它限制了你访问底层原生代码的能力。

5. 善用 ESLint、Prettier、Husky 等工具
   尤其是多人协作时，统一风格和提交规范非常重要。

6. 保持好奇心，持续关注新特性
   React Native 现在也在往 TurboModules、Fabric 方向发展，了解这些有助于把握未来方向。

---

结语：技术服务于业务，而不是反过来

说到底，React Native 只是一个工具，真正重要的是解决问题的能力和工程化思维。这次项目让我深刻体会到：快不是为了快而快，而是为了快速验证需求和节省开发成本。

希望这篇来自实战的文章，能够帮你在 React Native 的学习之路上少走一点弯路。如果你有任何问题，欢迎留言交流，我们一起进步！

🚀 欢迎来到 React Native 的世界，愿你的第一次跨平台之旅一切顺利！