🗒️

@aws-amplify/react-native 踩坑与最佳实践指南

2025-12-024 分钟1,423

目录

type
Post
status
Published
date
Dec 2, 2025
slug
summary
tags
开发
category
技术分享
icon
password
摘要:在 Expo 环境下使用 Amplify v6+ 时,最核心的问题在于原生依赖(Native Module)和缺少 Web 标准 API(Polyfills)。本文档旨在解决“Web 端能跑,App 端报错”的典型问题。

🚨 核心概念 (必读)

在开始 Debug 之前,必须明确以下两个原则,否则会无限踩坑:
  1. 必须要 Polyfill:React Native 环境没有浏览器的 cryptowindow 对象,必须手动注入。
  1. 告别 Expo Go:Amplify v6 依赖原生 C++ 代码进行加密运算。Expo Go (商店版) 不包含这些代码,必须使用 Development Build(开发构建版)。

🐛 常见报错与解决方案

1. 报错:Unknown: An unknown error has occurred

现象: 调用 signInsignUp 时直接抛出 Unknown 错误,没有任何 HTTP 请求发出。
原因: 缺少随机数生成器,Amplify 无法生成加密所需的 Salt 或 Hash。
✅ 解决方案
  1. 安装 Polyfill 库:
    1. (关键) 在项目入口文件(App.tsx, index.js, 或 _layout.tsx)的第一行引入:

      2. 报错:The package '@aws-amplify/react-native' doesn't seem to be linked

      现象
      原因: 你正在使用 Expo Go 运行项目,但项目中安装了包含原生代码的 Amplify 库。
      ✅ 解决方案: 从 Expo Go 切换到 Development Build 模式。
      1. 安装开发客户端:
        1. 重新编译本地 App(需连接模拟器或真机):
          1. 以后启动项目使用:

            3. 报错:Unable to resolve module ...

            现象: 尝试卸载 @aws-amplify/react-native 后,Amplify Core 依然报错找不到该模块。
            原因: Amplify v6 的核心库强制依赖 react-native 包,不能通过卸载来解决 Expo Go 的兼容性问题。
            ✅ 解决方案: 必须安装该包,并按照“报错 2”的方法切换到 Development Build。

            4. 登录报错:Network Error 或 签名失败

            现象: Android 模拟器上一直转圈或报网络错误,但电脑网络正常。
            原因: AWS Cognito 对请求的时间戳非常敏感(防止重放攻击)。如果模拟器时间与服务器时间相差超过 5分钟,请求会被直接拒绝。
            ✅ 解决方案
            • 检查时间:确保模拟器/真机的系统时间是“自动同步网络时间”。
            • Android 模拟器:有时候模拟器虽然显示时间对,但底层时钟是暂停的。尝试 Cold Boot (冷启动) 模拟器。

            📝 标准接入流程 Checklist

            在开始新项目或重构时,请按此清单检查:
            1. 安装依赖
            2. 添加入口 PolyfillApp.tsx 第一行添加 import 'react-native-get-random-values';
            3. 配置 Metro (可选但推荐) 如果遇到解析错误,在 metro.config.js 中添加排除项(通常 Expo 默认配置已足够,若报错再加): <details> <summary>点击查看 metro.config.js 配置</summary>
            </details>
            4. 生成本地包 运行 npx expo run:android,等待构建完成。
            5. 启动开发 运行 npx expo start --dev-client

            💡 调试技巧 (Debug Tips)

            当收到 Unknown Error 时,Amplify 往往掩盖了真实错误。使用以下代码块捕获底层信息:

            冷苏

            全栈开发者 · 前端 / 移动端 / Python / 桌面应用

            GitHub ⟶

            1.4k

            字数

            4

            分钟