React Native 从远程服务器下载 JS 代码

Question

我目前正在进行React Native的研发。

我的需求是需要在应用程序中添加一些模块(基本上是代码)。

在iOS原生应用程序中不可能这样做。

在React Native应用程序中，使用像AppHub和CodePush这样的工具，我们可以向生产应用程序推送构建。 有一个名为React Native Auto Updater的库可用于下载最新的js bundle，但现已过时。

使用上述工具，我需要推送构建。

我有一个场景，我希望应用程序从远程服务器获取并下载bundle。

那么，当应用程序通过rest API调用时如何下载JS代码并根据新的JS代码刷新应用程序呢?

我的关注点是关于JS代码的下载。 我对应用程序的自动更新部分很清楚。

提前感谢。

- Rakesh Gujari

---

我认为目前没有相关的库，我需要在Android上使用同样的库，所以我查阅了Code Push文档。对于iOS，您可以尝试相同的方法，在从服务器下载捆绑包后，您需要确保AppDelegate.m指向资源文件（提示：在Android中，我创建了一个片段，用于加载React Native捆绑包，一旦捆绑包下载完成，我会刷新该片段，以便React Native主机获取已下载的文件）。 - anbu selvan

我正在寻找同样的东西，我是新手，你能帮我吗？我该如何开始获取基本概念？ - Sagar

Answer 1

欧里卡！

我通过以下步骤完成了这个操作：

1. 创建一个离线 jsbundle。请参考此链接

   react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

2. 创建一个 Rest API 来下载 js bundle，请参考此链接

   我使用了 SpringBoot，确保你在 API 中添加 produces "text/javascript"

3. 在应用中下载 jsbundle，存储并获取 bundle 的路径。

4. 在 AppDelegate.m [iOS] 和 ReactApplication 类 [Android] 中重置 React native 的 bundle 路径。

- Rakesh Gujari

---

重置React Native在AppDelegate.m（iOS）和ReactApplication类（Android）中的bundle路径。你好，这是什么意思？我正在构建Android应用程序，但不确定你所说的“ReactApplication类”是什么。 - Han

@Han ReactApplication类指的是继承Application并实现ReactApplication的类。 - Rakesh Gujari

谢谢，我成功让它工作了。 :) - Han

如果离线 JS bundle 使用了一个未包含在我的主应用程序中的第三方库，会发生什么？ - user452349

Answer 2

请尝试使用"react-native-dynamic-bundle"包：https://github.com/mauritsd/react-native-dynamic-bundle。

此外，您也可以使用"react-native-fs"下载该包：

import RNFS from 'react-native-fs'

export const download = async (fromUrl, bundleName) => {
  return RNFS.downloadFile({
    fromUrl,
    toFile: RNFS.DocumentDirectoryPath + `/${bundleName}.bundle`,
  }).promise
}

敬礼，Juan

- jdnichollsc

---

嗨Juan，我能够使用react-native-fs下载bundle，但是使用已下载bundle的路径注册Bundle（react-native-dynamic-bundle）失败，并出现以下错误：“TypeError：null不是对象（评估'RNDynamicBundle.registerBundle'）”。你是如何让它工作的？ - user2107373