react-native - 解析与项目根目录外的本机捆绑文件相关的资产

问题描述

问题（android）：如果捆绑文件位于项目根目录之外，则相对于 js 捆绑文件的图像资产放置在哪里？

我们有一个小型服务，我们在每个构建中上传 JS 包。因此，例如我们有 app com.example，如果我们想更新我们的应用程序（当应用程序商店中的应用程序审查待定时），那么我们：

将 JS 包下载到 android 路径/data/data/com.example/files/bundle/android.bundle
通过https://github.com/mauritsd/react-native-dynamic-bundle将此捆绑包设置为活动

想象一下，在 react App 组件中，我们有一个带有 path 的图像star.png。

当我们激活一个新的捆绑包时，不会显示星形图像。

我在发布版本中通过https://reactnative.dev/docs/image#resolveassetsource检查了图像路径，并且图像 uri 仅解析为star.

所以我尝试了以下文件结构：

№1

data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star // <= our image

№2

data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star.png // <= our image

但如果捆绑文件位于项目根目录之外，则不会显示静止图像。

问题：

我究竟做错了什么？https://github.com/Microsoft/react-native-code-push设法解决了这个问题。
ios解决方案与android解决方案相同吗？

提前致谢

标签： react-nativecode-pushreact-native-code-push

解决方案

捆绑资产应放置在 js 捆绑文件所在的同一文件夹中（仅在 android 上测试）。

您始终可以通过https://reactnative.dev/docs/image#resolveaassetsource获取捆绑资产路径。

如何测试：

将图像放入star.png项目根目录。
使用以下代码创建一个反应原生应用程序：

import React from 'react';
import {
  SafeAreaView,
  Text,
  StatusBar,
  Image
} from 'react-native';
import Star from './star.png';

const App: () => React$Node = () => {

  const r = Image.resolveAssetSource(Star);
  console.log(r);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Text>TestAssetsApp</Text>
        <Image
          style={{width: 50, height: 50}}
          source={Star}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

MainApplication.java在您的（我的应用程序包称为）中设置捆绑路径com.testassetsapp：

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        // Add this method
        @Override
        protected String getJSBundleFile() {
          return "/data/data/com.testassetsapp/files/android.bundle";
        }
      };

通过以下方式创建 android JS 包和资产：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android.bundle --assets-dest assets

通过以下方式安装调试版本：

cd android && ./gradlew installDebug

注意：仅在./gradlew installDebug 没有运行 Metro 捆绑器的情况下通过测试，因为它总是重写捆绑路径。

现在，如果您运行该应用程序，您将收到错误“找不到捆绑包”。

上传android.bundle文件到/data/data/com.testassetsapp/files/android.bundle

现在，如果您运行该应用程序，它应该会启动。但星图尚未显示。

assets将文件夹中的捆绑文件上传到/data/data/com.testassetsapp/files应用程序数据结构应如下所示：

现在，如果您重新启动应用程序星形图像应该会显示。

react-native - 解析与项目根目录外的本机捆绑文件相关的资产

问题描述

解决方案

推荐阅读