Lfangq Site

外观

前言

约 1256 字大约 4 分钟

2026-01-15

React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过 React Native，您可以使用 JavaScript 来访问移动平台的 API，以及使用 React 组件来描述 UI 的外观和行为：一系列可重用、可嵌套的代码。

安装 Expo CLI

Expo CLI 是一个命令行工具，用于创建和管理 Expo 项目。 node 版本要求：12 LTS 或更高版本

npm install -g expo-cli

创建 React Native 项目

使用 Expo CLI 创建一个新的 React Native 项目：

expo init ReactNativeProject

创建模板选项：

----- Managed workflow -----
- blank               a minimal app as clean as an empty canvas
- blank (TypeScript)  same as blank but with TypeScript configuration
- tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
- minimal             bare and minimal, just the essentials to get you started

🎨 Managed Workflow 模板（推荐初学者或快速开发）

  1. blank

    • 描述：最基础的空白项目，只包含一个空屏幕，无额外依赖。
    • 语言：JavaScript
    • 适合：想从零开始构建应用，不需要 TypeScript。

  2. blank (TypeScript)

    • 描述：与 blank 相同，但使用 TypeScript 编写，包含基本的 TS 配置。
    • 语言：TypeScript
    • 适合：偏好类型安全、希望用 TypeScript 开发的新项目。

  3. tabs (TypeScript)

    • 描述：预配置了底部选项卡导航（使用 react-navigation），包含多个示例页面。
    • 语言：TypeScript
    • 依赖：@react-navigation/native、@react-navigation/bottom-tabs 等
    • 适合：需要多页面 + 底部导航结构的应用（如社交、电商类 App）。

⚙️ Bare Workflow 模板（适合需要原生定制的高级用户）

  1. minimal（Bare workflow）
    • 描述：不使用 Expo 的托管环境，直接暴露 iOS/Android 原生文件，仅保留最核心依赖。
    • 特点：可完全控制原生代码，但需自行处理构建、推送通知、权限等。
    • 适合：需要深度集成原生模块、或计划脱离 Expo Go 运行的项目。

运行项目后，手机扫描exp二维码没反应。

在 Android 11 上扫描 Expo 项目生成的二维码（通常是 exp:// 或 expo:// 开头的开发服务器链接）没有反应，这是一个比较常见的问题，主要原因和解决方案如下：

🔍 问题原因

从 Android 10（API 29）开始，Google 引入了 “包可见性（Package Visibility）” 限制。
到 Android 11（API 30），这一限制更加严格：应用无法随意检测或启动其他未声明的应用。

而 Expo Go 应用使用的是自定义 URL Scheme（如 exp://...），当你的扫码 App（如微信、浏览器、相机等）尝试打开这个链接时：

  • 系统会查找能处理 exp:// 协议的应用（即 Expo Go）；
  • 但由于包可见性限制，扫码 App 可能无法“看到”Expo Go 是否已安装；
  • 结果就是：点击链接无反应，或提示“找不到应用”。

✅ 解决方案

✅ 方法 1：直接在 Expo Go 中扫码

这是最可靠的方式：

  1. 打开手机上的 Expo Go 应用；
  2. 点击右上角的 “Scan QR Code”（或类似选项）；
  3. 用 Expo Go 自带的扫码器扫描开发服务器二维码。

✅ 这样绕过了第三方扫码工具的限制，100% 有效。

✅ 方法 2：通过浏览器打开链接（推荐）

  1. 将二维码中的链接（如 exp://192.168.x.x:8081）手动复制到手机浏览器地址栏；
  2. 浏览器会尝试打开 Expo Go；
  3. 如果系统弹出选择应用的对话框，选择 Expo Go 并勾选“始终使用”。

⚠️ 注意：部分国产 Android 定制系统（如 MIUI、EMUI）可能会拦截或静默失败，建议使用 Chrome 或系统默认浏览器。

✅ 方法 3：确保 Expo Go 已正确安装

✅ 方法 4：（开发者）配置 AndroidManifest.xml（仅限 Bare Workflow）

如果你在 Bare workflow 中开发自己的 App，并希望支持 exp:// 链接，需在 android/app/src/main/AndroidManifest.xml 中添加：

<queries>
  <package android:name="host.exp.exponent" />
</queries>

但这对普通用户使用 Expo Go 扫码不适用，仅适用于你自己的原生 App 调用 Expo 链接的情况。

❌ 常见误区

  • 用微信/支付宝/手机相机扫码：这些 App 在 Android 11+ 上通常无法唤起 Expo Go，因为它们不知道 exp:// 能被谁处理。
  • 以为是网络问题：其实链接根本没传给 Expo Go，不是连接失败。

📱 替代方案：使用 ngrok 或 Expo Dev Build（进阶）

如果局域网调试困难，可考虑：

  • 使用 npx expo start --tunnel 启动隧道，生成公网 exp://exp.tunnel... 链接，有时兼容性更好；
  • 或构建 Expo Dev Build 用于真机测试。

总结

在 Android 11+ 上，请务必使用 Expo Go 自带的扫码功能，不要依赖微信、浏览器或系统相机扫码。

这是 Android 系统安全策略导致的限制，非 Expo 本身 bug。

如有其他环境信息（如是否在同一局域网、Expo CLI 版本等），可进一步排查！

Copyright©2018-present Lfangq