如何从零高效的开发一款适配 Android 和 iOS 的移动端App

如果我们要从零开始开发一个移动端的 App，支持 Android 和 iOS ，那么，本文应该恰恰是你应该去看一看的。

首先，我们在做 App 时，第一件事情是不要慌，先做一下技术选型。目前来看，开发 移动端 App 的最好的跨端方案应该是 flutter 和 React Native 了。我们在选择 flutter 和 React Native 的时候，需要考虑以下几个关键因素：

1. 团队成员的经验：如果你的团队已经熟悉 JavaScript 和 React，那么使用 React Native 可能是更好的选择，因为它使用 JavaScript 进行开发。而如果你的团队更熟悉 Dart 或者愿意学习新的编程语言，那么 Flutter 可能是更好的选择。
2. 性能要求：虽然两个框架的性能都比较好，但是 Flutter 通常被认为在性能上稍微优于 React Native。这是因为 Flutter 使用 Dart 语言，它可以直接编译为本地代码，而不需要通过桥接器与本地代码进行交互，这可以减少性能损失，因此如果你们的愿景是做一款极致性能体验的 App，你就懂了该怎么选了。
3. UI 一致性：如果你希望你的应用在各种设备和平台上保持一致的 UI，那么 Flutter 可能是更好的选择。Flutter 自带一套丰富的组件库，可以让你的应用在各种设备上看起来几乎一样。而 React Native 则依赖于本地的 UI 组件，这可能会导致在不同平台上的 UI 有所不同。
4. 社区和生态系统：React Native 由于早于 Flutter 出现，所以其社区更加成熟，拥有更多的第三方库和工具。这可能会在解决特定问题或者寻找特定功能的库时更加方便。而 Flutter 虽然社区相对较小，但是正在快速增长，而且由于 Google 的大力支持，其生态系统也在不断改进。

总的来说，如果你们团队恰好大家都熟悉 dart，而且又对 App 的性能和 ui 一致性有极致的追求，那么 flutter 是你最好的选择，反之，排除这些因素，如果你们想快速做出产品，而且团队偏前端一些，基本都懂 react，那么 react native 的研发效率会快很多。

那么，我们今天就假设你的团队处于第二种情况，即，对传统的前端研发，非常精通，你大概率会选择 react native，那么本文讲非常适合你读下去。

Expo 快速研发 React Native App

随着react native 诞生，以经历过一段不短时间的发展，有些 react native 配套的快速开发框架也随之出现，其中 expo 就是里面的翘楚，我这两天也正是体验了一下 expo 研发一个 chatbox 的 App，有了一些体验，所以才整理输出一篇关于 expo 开发 react native 的小作文。为什么安利这个，因为我的感受如下：

• 开发者只需要关心业务逻辑研发
• 无需关心环境配置
• 无需关心库的兼容性
• 无需关心复杂的打包配置
• 非常便捷的无线调试，无需USB 链接手机，无需开发者模式
• 内置的 React Native 组件和 API，这可以帮助开发者快速构建复杂的功能，而不需要自己从头开始编写。
• expo-router的方式，想开发网页应用一样迅速。

为了快速体验 expo 的魔力，我强烈建议，直接 clone 我的 project，：

按照指引，本地启动之后，应该可以看到：

我们手机上需要安装 expo app，打开这个 App，扫上面这个码，就可以调试我们的应用了，就如此之简单。一个小插曲，此时，我们发现 expo 的库有了更新，你可以选择忽略，但还是建议你执行

npx expo install  --fix

去更新下，一般expo 是因为修复某些 bug，版本会相对来讲更加稳定，而且是兼容的，所以无需担心，不兼容的版本会有强提示。

业务研发

在业务研发的时候，我们避免不开需要选择一些高效的库来做支撑，如全局状态管理，数据缓存，网络请求，UI 库等等。我这里建议如下，当然选择适合自己 的很关键。

• ui 组件库 react-native-elements ，该库提供了一个expo 框架的模板，我就是基于这个开始的，而且还是一个 typescript 的。相当省事。
• 状态管理 zustand，这个使用上感觉比 redux 要轻很多，而且配合中间件，状态的本地缓存几乎就是配置配置，完全不需要超心，省时省力。
• 路由 expo-router，这个库的方便之处在于无需路由配置了，框架来做了，有点类似于 next.js 的方式。
• 网络请求 tanstack / react-query，这个库是用来做数据请求的，mutate用来做触发，query 用来做查询，状态管理根本就无需你关心，缓存失效自动触发更新等机制真的是太爱了，你要做的真的就是面相逻辑编程。
• 本地缓存 async-storage，这个不用多讲，配合 zustand，完全无需你操心，可能你仅仅需要的是 npm install 一下这个库而已。🤣

整个下来，可能我就花了一天的时间就完成了一个 和 ChatGpT 对话的 工具了，真的是面向逻辑编程，界面上看起来够用，但确实不如 flutter 那般精致。但是作为使用过 flutter 开发过 chat box 的人，对比只想，个人感觉 expo 开发 flutter 的效率那的确是杠杠的，毕竟伸手可用的资源实在太多且太成熟了。

App 调试

expo 比较方便的是，他自带摇一摇打开黑科技调试页面，如下所示：

打开调试界面之后，我们可以非常方便的使用性能观测工具，Element Inspector 等等，如下，是查看界面的布局。

打包

这里仅仅给一个打包 Android 的示例，iOS 打包 ipa 其操作过程类似，因此无需过多废话，打包 Android 的命令如下：

eas build -p android --profile preview

不过需要注意，在打包之前，你需要在项目的根目录下面，创建一个配置文件eas.json，其类容如下：

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

打包效果如下所示：

因此在你老板让你快速开发一个跨端 App 的时候，我想你应该知道大抵如何去选型了。