Expo是什么？使用Expo创建ReactNative工程和构建_react native expo

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

小胡子的麦片 · 模式 : WPF ...· 1 年前 ·

豪情万千的土豆 · 如何在CSS中使用变量 - chuckQu ...· 2 年前 ·

玩篮球的松鼠 · cv::imread读不出图片的解决办法「建 ...· 2 年前 ·

长情的跑步机 · #css# ...· 2 年前 ·

纯真的鼠标垫 · css设置字体大小中的斜杠是什么意思？_字体 ...· 3 年前 ·

中文官网：https://expo.nodejs.cn/get-started/expo-go/

Expo 是一款开源框架，适用于在 Android、iOS 和 Web 上原生运行的应用。Expo 汇集了移动和 Web 的精华，并支持构建和扩展应用的许多重要功能。

基于React Native的一款上层框架
同时支持Android、iOS 和 Web的跨端开发
提供了Expo CLI脚手架、Expo Go沙箱、EAS 构建、EAS 提交、EAS 更新、Expo Router、Expo module API 等一系列扩展功能
通过Expo，避免了直接对原生开发，原生代码都由Expo构建产出。（但也支持自定义原生内容）
Expo SDK 接续了 React Native 核心库的结尾。它提供对许多设备和系统功能的访问，例如音频、条形码扫描、相机、日历、联系人、视频等。它还添加了其他强大的库，如更新、地图、OAuth 身份验证工具等。目前很多主流库都支持Expo，不支持的库也提供了接入方式。

部分操作需要科学上网，比如官网账号注册、本地编译的gradle仓库等

安装第三方库时，建议始终直接使用 npx expo install 而不是 npm install 或 yarn add，因为它允许 Expo CLI 在可能的情况下选择库的兼容版本，并警告你已知的不兼容性。
例如：

npx expo install expo-device
此文记录了Expo的工程搭建、构建应用到Expo Go 沙箱环境中、使用云端远程构建、使用本地构建。 
二、使用Expo创建工程和构建
 
1、使用脚手架和Expo Router模板（也可以不用）初始化项目：
 
npx create-expo-app@latest --template tabs@50
初始化的项目，自动安装了ReactNative/expo router相关的库
  
2、在Expo Go沙箱环境中运行你的应用
 
Expo Go 是一个免费的 open-source 沙箱，用于在 Android 和 iOS 设备上学习和试验 React Native。可以在Goole应用商店下载（国内应用商店好像没有），或者后续步骤会自动安装。
 注意：Expo不建议使用 Expo Go 来构建生产质量的应用，也就是说这个沙箱环境用来写写demo学习啥的，不要用来做正式开发 
需要先将设备通过adb连接 
adb reverse tcp:8081 tcp:8081
启动开发服务器 
npm start 
当你运行上述命令时，Expo CLI 启动 Metro 打包器，该打包器是一个 HTTP 服务器，它使用 Babel 编译应用的 JavaScript 代码；
  
在你的设备上运行应用
 按a选择运行到android后，会在你的设备上安装Expo Go的应用，接下来，需要将Metro 编译后的js代码在 Expo Go沙箱环境运行。
方式1：在Expo Go 应用主页选项卡上的扫描二维码，然后扫描你在终端中看到的二维码。
方式2：在Expo Go 应用主页选项卡上的Enter URL manually，然后键入启动的开发服务器连接。 
3、开发环境构建，创建开发版本
 
Expo 推荐构建开发版本进行项目开发，而不是使用Expo Go 沙箱环境。
Expo的开发版本，指的是是包含 expo-dev-client 包的应用的调试版本，可以完全控制原生运行时，可以使用 安装任何原生库、修改任何项目配置 或 编写自己的原生代码，构建出自己的原生应用。
expo-dev-client 替换了RN默认的应用内开发工具UI，提供了扩展功能
为工程安装expo-dev-client包： 
npx expo install expo-dev-client
3-1、EAS Build构建（远程构建）
 
EAS Build 是一项托管服务，用于为你的 Expo 和 React Native 项目构建应用二进制文件。EAS Build 可供拥有 Expo 账户的任何人使用，可以在 https://expo.dev/signup注册（注册时会调用goole服务，需要科学上网，否则一直报错） 
a、安装EAS CLI
 
npm install -g eas-cli
eas login
你可以通过运行 eas whoami 来检查你是否已登录。 
c、添加配置
 
eas build:configure
如果项目中配有为eas添加配置，直接执行eas build，会运行相同的过程。执行完成后会生成eas.json文件： 
  "cli": {
    "version": ">= 7.7.0"
  "build": {
    "development": {
       // 表明该构建依赖于 expo-dev-client。这些构建包括开发者工具
      "developmentClient": true,
      // 可以进行内部应用分发
      "distribution": "internal"
    "preview": {
      "distribution": "internal"
    "production": {}
  "submit": {
    "production": {}
它为每个平台定义了三个名为 “development”、“preview” 和 “production” 的构建配置文件（你可以有多个构建配置文件，如 “production”、“debug”、“testing” 等）。具体配置参考：使用 eas.json 配置 EAS 构建 
d、为android应用构建.apk包
 
 使用production配置构建部署版本AAB：没有指定–profile时，默认使用production配置，产物文件格式是 安卓应用包 (AAB/.aab)。此格式针对分发到 Google Play 商店进行了优化。但是，AAB 无法直接安装在你的设备上。要将构建直接安装到 Android 设备或模拟器，你需要构建 安卓包 (APK/.apk)。
 
 使用development的配置构建开发版本APK：（包含开发工具和内部分发）
 eas build -p android --profile development
  使用preview的配置构建预览版本APK：（不包含开发工具，只能内部分发）
 eas build -p android --profile preview
Android 应用签名凭据 
 如果你尚未为你的应用生成密钥库，你可以在build时通过选择 Generate new keystore 让 EAS CLI 为你处理，然后就完成了。密钥库安全地存储在 EAS 服务器上，可以通过 eas credentials 命令行进行管理。管理自动凭据
 
 如果你之前使用 expo build:android 构建过应用，则可以在此处使用相同的凭据。
 
 如果你想手动生成密钥库，请参阅 手动创建 Android 凭证 了解更多信息。
  
 安装到模拟器
 构建完成后，CLI 将提示你自动下载并将其安装到 Android 模拟器上。出现提示时，按 Y 直接安装到模拟器上。
 如果你有多个版本，你还可以随时运行 eas build:run 命令来下载特定版本并将其自动安装在 Android 模拟器上：
 eas build:run -p android
 
 安装到真机
 直接下载apk文件安装 或 通过adb安装
  
3-2、EAS Build构建（在你本机上执行EAS build）
 
eas build --platform android --local
eas build --platform ios --local
一般不要在本地这样做，只有当云端构建无法找到问题，再尝试寻找问题，且在本地使用EAS Build一些属于云端的功能将不可用。
 参考：了解如何使用 --local 标志在你的计算机或自定义基础架构上本地使用 EAS Build。 
3-3、本地构建
 
// 本地构建android开发版本
npx expo run:android
// 本地构建ios开发版本
npx expo run:ios
 你还可以添加 --device 标志来选择运行应用的设备 - 你可以选择物理连接的设备或模拟器/模拟器。
 
 你可以传入 --variant release (Android) 或 --configuration Release (iOS) 来构建 你的应用的生产版本。
 
 这些编译命令最初运行 npx expo prebuild 以在构建之前生成原生目录（android 和 ios）（如果它们尚不存在）。如果它们已经存在，这将被跳过。
 
 生成原生代码后，需要依赖本机的环境进行原生工程构建，如：node、jdk、 Android SDK 等
 
 生成的原生代码是根据expo SDK 提供的模板生成，其中的gradle仓库等地址在国内网络可能无法正常访问，导致构建失败。
  
尽管EXPO 不建议修改npx expo prebuild 生成的原生代码，因为这和直接修改node_modules中的代码是一样的问题，其他人在重新构建或更新构建的时候会出现不可预知的问题。 
但由于网络问题，可能需要手动进行原生工程的构建（比如修改gradle仓库地址等）。（PS：这个问题暂时未找到解决方案，属于临时处理） 
npx expo prebuild --clean 生成原生代码，确保每次的原生代码都是EXPO生成的，保证原生代码是受控的。
手动构建原生工程（比如修改gradle仓库地址等）
原生工程代码./android 和 ./ios应当添加到.gitignore中。
                                    react-native 相信大部分前端开发都不会陌生——使用 JavaScript 和 React 编写原生移动应用。用 js 就能分 ios 和 android 的一杯羹。(哈哈，开个玩笑:)。玩笑归玩笑，但它能说明在开发移动应用领域，RN 有它的一席之地。
面临的问题
掌握 RN 无意能给自己增添更多筹码。但学习 RN 并有没想象中的那样顺畅。我觉得， 最大的困扰就是环境配置。re...
                                    一. 背景react native官方现在推荐的项目构建方式是create-react-native-app，即简称CRNA，并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后，命令行输入npm start，随即会为开发者创建一个开发服务器，并打印出大大的二维码，使用expo扫码，即可预览项目，不过真的这么丝滑吗，使用中还是遇到了一些问题。二. 踩坑记手机和电脑均连接着同一WiFi
                                    首先，确保你的开发环境已经安装了 Node.js 和 npm。为了实现多页面应用，我们需要使用 React Navigation。为了保存用户数据，我们可以使用 AsyncStorage。为了实现推送通知功能，我们可以使用 Expo 的推送服务。为了使界面更加美观，我们可以使用 Flexbox 布局。接下来，我们添加一个功能来获取数据，并显示在界面上。我们从一个简单的首页开始，包含一个标题和一个按钮。为了更好地管理状态，我们可以使用 React 的。在 App.js 中注册设备并接收推送通知。
Node：8.5.0
然后安装下面的工具，不分先后。
首先说下 create-react-native-appnpm install -g create-react-native...
                                    命令创建一个新的 React Native 项目。你可以选择一个模板来开始，例如空白模板（命令执行后，Expo 会提示你选择一个模板。）或带有 TypeScript 支持的模板（选择完模板后，Expo 会自动安装所有依赖。
                                    react-native官网中推荐开发使用expo去开发和真机启动项目。
在项目中可以使用expo的脚手架expo-cli去搭建，也可以使用create-react-native-app 脚手架去搭建。博客中使用的后者。前者可以参考官网 Get Started
全局安装脚手架
cnpm -g i create-react-native-app
创建项目
create-react-native-ap...
 简介：***.apk是React Native开发者的安卓调试工具最新版本。它集成了Expo框架，旨在简化React Native应用的开发流程，提高构建、测试和发布原生移动应用的效率。Expo提供快速原型设计、热重载、跨平台兼容性、集成服务、离线体验、更新机制、兼容性、独立打包选项、调试工具和强大的社区支持等核心特性，是React Nat...