标签： expo

React Native + Expo 入门级实战开发多平台应用 WhiteScreen：3. 深入开发，完成应用主体
感谢剪辑同学的努力工作，第三集上线。

油管地址：https://youtu.be/0Ix-Y-MPQY0

B站地址：https://www.bilibili.com/video/BV1CxnJzfEAk/

继续分享 React Native+Expo 应用开发，帮大家补上全栈开发的最后一块拼图：移动应用开发。

在这个系列视频里，我会用一个入门级小应用 WhiteScreen 作为范例，介绍如何使用 React Native+Expo 开发移动应用，并上传到应用商店。虽然国内市场基本被几个超级应用垄断，但是海外的广阔天地仍然大有可为。而 React Native 可以最大限度的利用我们已有的技术积累，让我们快速完成原型开发与需求验证，是全栈开发的不二之选。

这期是第三次课，主要介绍：
1. 使用 Zustand 管理状态，在页面间同步数据
2. 使用原生组件进行布局
3. 实现简单动画
4. 实现本地数据存储于使用
希望能给大家带来更多的可能性，在这个不那么容易的年代，让大家都有更多的选择余地与发展空间。

希望大家留下宝贵的一键三连分享收藏，让更多的人能看到我的视频。

有任何问题和建议，欢迎留言弹幕一起讨论。

谢谢大家！
2025年9月27日
【视频教程】React Native + Expo 入门级实战开发多平台应用 WhiteScreen：2. 配置模拟器开发环境+开发Expo应用

感谢剪辑同学的努力工作，第二集终于可以奉献给各位同学。

油管地址：https://youtu.be/YEPvihSIQkw

B站地址：https://www.bilibili.com/video/BV1ZgHoztE4v/
（更多…）

2025年9月19日
【视频教程】React Native + Expo 入门级实战开发多平台应用 WhiteScreen：1. 移动应用开发现状+项目简介+技术栈简介

前几天我在博客感谢赞助商 Mizu Financial，重启我的自媒体之路提到，因为工作调整，下一阶段我要捡起自媒体，在新的工作开始之前，提升一下自身的品牌价值。所以，我开启了新系列视频教程的录制。

现在新视频终于上线，敬请观看。

油管地址：https://youtu.be/YEPvihSIQkw

B站地址：https://www.bilibili.com/video/BV1ZgHoztE4v/
（更多…）

2025年9月14日
解决 React Native + Expo 面对 Google Play 的 16KB memory page 问题
最近开始尝试开发 App，倒不是什么复杂的大项目，只是把朋友网站上的功能移植到移动端。技术栈仍然是 React Native + Expo，不过以前只做过 iOS，这次连 Android 一起做。

那么自然的，这次就要踩 React Native Android 的坑。以后会分享所有相关的知识体验和坑，今天先分享最近两天花了不少时间解决的 Google Play 16KB memory page 问题。

我们的应用提交到 Google Play 后，原本一切正常，前两天突然收到 Google 的政策通知：

为确保您的应用能在最新版 Android 上正常运行，Google Play 要求以 Android 15 及更高版本为目标平台的应用支持 16 KB 内存页面大小。

自 2026年5月30日起，如果您的应用更新不支持 16 KB 内存页面大小，您将无法发布相应更新。

您的最新正式版应用不支持 16 KB 内存页面大小。

嗯，必须承认，看到这个问题我一头雾水。不过好在我也不需要把它理解透彻，只要知道该怎么改就好。可惜的是，Gemini 对这个问题没什么了解，我只好去阅读 Google 的文档，得到的结论是：

我需要修改 /android/app/build.gradle 其中的配置 useLegacyPackaging 将其改成 true：
```
android {
    packagingOptions {
        jniLibs {
            useLegacyPackaging true
        }
    }
```
不过我使用的是最新版 expo prebuild 生成的 Android 项目，所以这个配置本身依赖 app.json 的配置，那么理论上，我只需要添加下面这行：
```
{
  "expo": {
    "android": {
      "useLegacyPackaging": true
    }
  }
}
```
于是我改好配置重新打包上传，结果还是不行。认真阅读 app bundle 详细信息，发现错误位于 base/lib/arm64-v8a/librnskia.so 和 base/lib/x86_64/librnskia.so ，很明显，这是 @shopify/react-native-skia 包，也就是我们的绘图依赖。

因为我的项目里用到 Expo，所以我一般用 Expo 安装依赖，安装的版本也由 Expo 决定。目前版本的 Expo 要求的 @shopify/react-native-skia 版本是 v2.0.0-next.4，在 GitHub issues 里搜索一下，发现这个版本果然不支持 16KB Memory page，而修复的版本是 v2.0.6。

按照我的习惯，有新不用旧。于是直接升级到 2.2.9，然后应用就挂了……于是降级到 v2.0.7（2.0 版本的最高版本），测试没问题。打包上传，终于解决了 16KB 警告。

简单总结一下：
1. 不同平台有不同要求，不过大多可能和 RN 无关，通过项目配置就能解决
2. React Native 由于跨平台，跨运行时，依赖之间的关系很复杂，不能乱升级，尽量控制小版本，只升补丁版本
2025年9月6日
【系列教程】使用 Vercel Serverless function 连接 APNs 实现 iOS 推送通知（2）代码解析
上一篇文章我们分享了 Push Notification 的基础原理和项目配置，这一篇我们开始看具体的代码。
（更多…）
2025年2月9日
【系列教程】使用 Vercel Serverless function 连接 APNs 实现 iOS 推送通知（1）基础知识
新年开新坑，写一个小教程，分享一下年前尝试用过 Vercel Serverlss function 通过 APNs 发送通知的经验，虽然能找到不错的教程，但仍然要踩一些坑。希望对大家有帮助。祝大家蛇年大吉，快速成长。
（更多…）
2025年2月2日
近期一段调试 React Native 诡异 bug 的经验

熟悉我的同学可能知道，我近期开始尝试用 React Native + Expo 开发移动应用，接触到很多不之前熟悉的东西。当一切顺利的时候就还好，当遇到难以排查的问题时，就需要付出数倍于以往的努力才行。今天就分享近期一段调试 React Native 诡异 bug 的经历。

需求其实很简单，就是个单选组件。我使用 <ScrollView> 做外部容器，里面有若干<Pressable>，点击哪个就选哪个。现在的问题是：选择之后，会更新 state，造成父组件刷新，继而 <ScrollView> 刷新，然后滚动位置就归零了，感观上就滚动到最上面了。很难受，折腾一晚上没解决……
（更多…）

2024年12月17日
升级 Expo v52 小记
（草稿箱里躺了半个月，写完赶紧发了）上周查文档，发现 Expo latest 已经升级 52，于是准备找机会把 DailyLift 的依赖升级到最新版本。这周一趁着 kick-off 还没开，尝试升级了一下，很顺利，1.5 小时升级完毕跑起来没什么问题，这里小记一下。
Expo v52 的主要升级（仅限我用到的）
1. 新架构。（其实我不知道具体是什么新架构，不过听说有新架构字我觉得非升不可。）
2. React Native 升级到 v0.76
3. expo/fetch 可以支持流式传输，这样我们就不再依赖 SSE。不过，考虑到 React 和 React Native 自身的数据传递方式（缓存数据），和低频渲染，我觉得可能对实际开发的提升不大。
4. expo-audio 重写了录音功能，支持后台录音，现在切换应用时不用担心录音断掉了。
5. expo-live-photo iOS 下支持 live photo 了，不知道有多大价值，也许再 iOS用户眼里是个很重要的升级吧。
6. React Native DevTools 这个非常重要，在国内使用不需要翻墙，且支持 Network 面板，升级非常明显。
主要变更
1. iOS 基础版本升级到 15.1
升级步骤

首先，建议阅读官方的升级指引：https://expo.dev/changelog/2024/11-12-sdk-52。因为不同开发者都有自己的开发习惯，我的升级笔记未必适合所有人，官方的要全乎得多。

不过有一点，上面说“先把所有依赖升级到最新版“，而我的经验告诉我，React Native + Expo 不能乱升级依赖，否则几乎必挂。所以这里建议大家小心为上，项目能跑就别轻易升级，React Native 的环境太复杂了。

检查依赖

使用 npx expo-doctor@latest 检查依赖，确保所有依赖都支持新版本。因为我大部分功能依赖都是从 Expo 找来的，所以这一步基本上没遇到问题。只有少数纯 JS 或者统计之类的代码无法明确得到支持状态。

升级依赖
```
npx expo install expo@^52 --fix
```
重复 npx exp-doctor@latest 和 expo install --check 直到所有的依赖都安装完成并且检查通过。将其它 React Native 无关的仓库，比如 lodash，@supabase/supabase-js，@amplitude/analytics-react-native 等等也都升级到最新版本。

expo prebuild 重新构建原生开发目录。不过我建议，如果没有修改过原生开发目录里的文件，直接删掉然后重建会比升级更好。至少我这里第一次原址升级失败了，第二次完全重建才搞定。

调整代码

升级依赖完成之后，开始调整代码。我这方面没遭遇什么问题，基本上两个版本都顺利兼容。为数不多要修改的地方主要来自于早期对 Expo 不够熟悉而错误的混用了 Expo Stack 和 React navigation Stack。这是另一个话题，等我下次分享出来。

总结

整体来说升级过程比较顺畅和平滑，这得益于我之前尽量使用 Expo 推荐的功能库，并且不 hack 代码。所以整个项目比较稳定可靠。

建议大家在条件允许的情况下都尽快升级到 Expo v52。如果大家遇到什么问题，欢迎留言讨论。
2024年12月1日
近期 React Native + Expo 研发笔记
整理一下近期开发 React Native App 的经验，以 tips 为主，写下来确保将来不会掉在同样的坑里。能够直接从官方文档查到的我就不写了，这里主要记录我踩到的坑。
技术栈

先说技术栈，我们目前的技术栈主要是：
1. React Native v0.74.5，版本受 Expo 限制
2. Expo v51.0.38
3. NativeWind 用来写样式，蛮舒服的
4. Supabase + expo-sqlite + AsyncStorage 用来做各种存储
5. expo-apple-authentication + @react-native-google-signin/google-signin 用来 SSO
6. expo-av 用来录音
7. react-native-sse 用来流式传输
选择 Expo 是因为 React Native 官方推荐，搭起来环境才发现没那么必要……不过配都配好了，就懒得重新搞了。实际用了之后，感觉还不错，大部分功能都更好用，尤其是各种组件比原始组件要好很多。所以推荐大家需要新组建时先看 Expo SDK：docs.expo.dev/versions/latest/sdk/ 大部分都比原生组件好。实在没有再去找其它 React Native 组件。

Expo

Expo 不是必须的，但还是蛮值得使用的。尤其是对 App router 这种基于文件系统的路由体系很熟悉的开发者来说，Expo 很值得。

Expo 提供构建体系 eas，不过免费版每个月只能构建 15 次 iOS，不够用。所以大部分时间还是本地构建。构建之后，无法直接右键安装，但是可以通过 XCode Devices 安装。

使用 Expo 需要注意环境变量和组件配置。因为对 .env 的修改、环境配置（app.json）、Logo、字体等的配置不一定会实时生效。所以修改这些不受 React Native 控制之后的东西，都先 prebuild + clean cache，然后再打包。或者直接在项目里手动搜索并修改也可以。

手机上安装 Expo App 之后可以在 React Native 和 Expo 的网站上预览效果。其中 Android App 可以直接启动摄像头扫二维码；iOS app 没有启动摄像头的选项，我一直以为没法用，后来才发现，直接用照相机扫描二维码，就可以在 Expo 里打开了。

NativeWind

NativeWind 让我们可以在 React Native 里使用 TailwindCSS 和 className，非常舒服，非常推荐。

不过 NativeWind 也有问题。有些组件的 className 不会直接应用在外层容器上，比如 expo-image。而如果不设置 width、height 的话，<Image> 就不会显示，这会导致我们无法正常使用这个组件。

还有一些组件，它们由多个视觉组件组成，所以样式也需要分层配置，就有一些诸如 containerWrapperStyle 的属性。这样的组件也无法通过 className 来配置样式。所以我们使用的时候还是要多小心。如果组件渲染不符合预期，那么就看看组件如何应用样式。

Expo Image

Expo Image 比起 React Native Image 强很多：
- 支持 WebP
- 支持缓存
- 支持 object-fit 和 object-position 填充
- 支持一些我还没有用到的新特性
非常推荐。但是不支持 NativeWind，请大家记得直接操作其 style 属性。

FlashList

<FlashList> 是 Shopify 开发的列表组件，针对大量内容高速滚动做了优化。它提供兼容 <FlatList> 的接口，可以无痛替换，推荐使用。

使用的时候，需要注意滚动方向。比如 Twitter 这种最新的在上面，就是默认滚动；如果是聊天窗口这样最新的在下面，就要 inverted=true。同时还要注意，inverted=true 之后，Header Footer 的位置也要对调。

Expo AV

Expo AV 可以用来录音和播放音频。我们用它来实现 STT。将来会尝试原生 STT。

需要注意的点不多，主要就是切换应用时，录音会自动停止，并且无法继续。所以我们需要侦听事件，并且做出相应的处理。

渲染效率

React Native 不支持非常高频的渲染，比如 Streaming output。在网页上没问题，在 RN 里就会报错：too many renderings。所以，我们需要适当缓存数据，减少渲染频率。我目前是 32 token 渲染一次。

将来会尝试用 reanimate 之类的库来渲染文字，看看能否得到更好的效果。

总结

其实最近遇到的问题很多都跟 React 有关，不过考虑到 React 开发者恐怕不会认为这些“问题”是问题，所以还是写一些文档里找不到但是可能会踩到的坑吧。

希望对大家有用，如果大家对 React，React Native，React Native Expo 开发感兴趣、有问题的话，欢迎留言讨论。
2024年11月3日