首页指南参考教程

在裸 React Native 项目中安装 expo-updates

了解如何在裸 React Native 项目中安装和配置 expo-updates。

expo-updates 是一个库，可让你的应用管理对应用代码的远程更新。它与配置的远程更新服务通信以获取有关可用更新的信息。本指南介绍如何设置一个裸 React Native 项目以用于 EAS 更新，EAS 更新 是一种托管远程更新服务，其中包括用于简化 expo-updates 库安装和配置的工具。

¥expo-updates is a library that enables your app to manage remote updates to your application code. It communicates with the configured remote update service to get information about available updates. This guide explains how to set up a bare React Native project for use with EAS Update, a hosted remote update service that includes tools to simplify installation and configuration of the expo-updates library.

Do you use Continuous Native Generation (CNG) in your project?

你可能阅读了错误的指南。要在使用 CNG 的项目中使用这些 expo-updates，请参阅 EAS 更新 "开始使用"。

¥You may be reading the wrong guide. To use expo-updates in a project that uses CNG, see EAS Update "Get started".

先决条件

¥Prerequisites

必须安装和配置 expo 包。如果你使用 npx react-native init 创建了项目并且没有安装任何其他 Expo 库，则在继续之前需要 安装 Expo 模块。

¥The expo package must be installed and configured. If you created your project with npx react-native init and do not have any other Expo libraries installed, you will need to install Expo modules before proceeding.

安装

¥Installation

首先，安装 expo-updates：

¥To get started, install expo-updates:

Terminal
- npx expo install expo-updates

然后，安装适用于 iOS 的 pod：

¥Then, install pods for iOS:

Terminal
- npx pod-install

配置 expo-updates 库

¥Configuring expo-updates library

应用以下部分中的差异更改来配置项目中的 expo-updates。

¥Apply the changes from the diffs from the following sections to configure expo-updates in your project.

JavaScript 和 JSON

¥JavaScript and JSON

运行 eas update:configure 以在 app.json 中设置 updates URL 和 projectId。

¥Run eas update:configure to set the updates URL and projectId in app.json.

Terminal
- eas update:configure

修改 app.json 的 expo 部分。（如果你使用 npx react-native init 创建了项目，则需要添加此部分。）

¥Modify the expo section of app.json. (If you created your project using npx react-native init, you will need to add this section.)

以下更改将 updates URL 添加到 Expo 配置中。

¥The changes below add the updates URL to the Expo configuration.

下面显示的示例 updates URL 和 projectId 与 EAS 更新一起使用。运行 eas update:configure 时，EAS CLI 会为 EAS 更新服务正确设置此 URL。

¥The example updates URL and projectId shown below are used with EAS Update. The EAS CLI sets this URL correctly for the EAS Update service when running eas update:configure.

app.json
 {
   "name": "MyApp",
-  "displayName": "MyApp"
+  "displayName": "MyApp",
+  "expo": {
+    "name": "MyApp",
+    "slug": "MyApp",
+    "ios": {
+      "bundleIdentifier": "com.MyApp"
+    },
+    "android": {
+      "package": "com.MyApp"
+    },
+    "runtimeVersion": "1.0.0",
+    "updates": {
+      "url": "https://u.expo.dev/[your-project-id]"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "[your-project-id]"
+      }
+    }
+  }
 }

如果你想设置 自定义 expo-updates 服务器，请将你的 URL 添加到 app.json 中的 updates.url。

¥If you want to set up a custom expo-updates server instead, add your URL to updates.url in app.json.

app.json
 {
   "name": "MyApp",
   "displayName": "MyApp",
   "expo": {
     "name": "MyApp",
      ...
     "updates": {
-      "url": "https://u.expo.dev/[your-project-id]"
+      "url": "http://localhost:3000/api/manifest"
     }
   }
 }

安卓

¥Android

修改 android/app/build.gradle 以检查 Expo 文件中的 JS 引擎配置（JSC 或 Hermes）：

¥Modify android/app/build.gradle to check for the JS engine configuration (JSC or Hermes) in Expo files:

android/app/build.gradle
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -52,6 +52,11 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }

+// Override `hermesEnabled` by `expo.jsEngine`
+ext {
+  hermesEnabled = (findProperty('expo.jsEngine') ?: "hermes") == "hermes"
+}
+
 /**

  * Set this to true to create four separate APKs instead of one,

  * one for each native architecture. This is useful if you don't

修改 android/app/src/main/AndroidManifest.xml 以添加 expo-updates 配置 XML，使其与 app.json 的内容匹配：

¥Modify android/app/src/main/AndroidManifest.xml to add the expo-updates configuration XML so that it matches the contents of app.json:

android/app/src/main/AndroidManifest.xml
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -9,6 +9,11 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
+      <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
+      <meta-data android:name="expo.modules.updates.EXPO_RUNTIME_VERSION" android:value="@string/expo_runtime_version"/>
+      <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+      <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+      <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="http://localhost:3000/api/manifest"/>
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

如果使用上面显示的更新服务器 URL（在同一台计算机上运行的自定义非 HTTPS 更新服务器），你将需要修改 android/app/src/main/AndroidManifest.xml，如下所示：

¥If using the updates server URL shown above (a custom non-HTTPS update server running on the same machine), you will need to modify android/app/src/main/AndroidManifest.xml as shown below:

android/app/src/main/AndroidManifest.xml
 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme"
+ android:usesCleartextTraffic="true"
 >

将 Expo 运行时版本字符串键添加到 android/app/src/main/res/values/strings.xml 中：

¥Add the Expo runtime version string key to android/app/src/main/res/values/strings.xml:

iOS 系统

¥iOS

将文件 Podfile.properties.json 添加到 ios 目录：

¥Add the file Podfile.properties.json to the ios directory:

ios/Podfile.properties.json
{
  "expo.jsEngine": "hermes"
}

修改 ios/Podfile 以检查 Expo 文件中的 JS 引擎配置（JSC 或 Hermes）：

¥Modify ios/Podfile to check for the JS engine configuration (JSC or Hermes) in Expo files:

ios/Podfile
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -2,6 +2,9 @@ require File.join(File.dirname(`node --print "require.resolve('expo/package.json
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

+require 'json'
+podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
+
 platform :ios, '13.0'
 prepare_react_native_project!

@@ -41,7 +44,7 @@ target 'MyApp' do
     # Hermes is now enabled by default. Disable by setting this flag to false.
     # Upcoming versions of React Native may rely on get_default_flags(), but
     # we make it explicit here to aid in the React Native upgrade process.
-    :hermes_enabled => flags[:hermes_enabled],
+    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
     :fabric_enabled => flags[:fabric_enabled],
     # Enables Flipper.
     #

将包含 Expo.plist 的支持目录添加到 Xcode 中的项目中，其中包含以下内容，以匹配 app.json 中的内容：

¥Add the Supporting directory containing Expo.plist to your project in Xcode with the following content, to match the content in app.json:

Expo.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>EXUpdatesCheckOnLaunch</key>
    <string>ALWAYS</string>
    <key>EXUpdatesEnabled</key>
    <true/>
    <key>EXUpdatesLaunchWaitMs</key>
    <integer>0</integer>
    <key>EXUpdatesRuntimeVersion</key>
    <string>1.0.0</string>
    <key>EXUpdatesURL</key>
    <string>http://localhost:3000/api/manifest</string>
  </dict>
</plist>

下一步

¥Next steps

Expo 中文网 - 粤ICP备13048890号