React Native Android使用Play Asset Delivery加载资源失败求助

我的App包含大量音频和图片资源，无法上传至Google Play，因此打算使用Play Asset Delivery。我已经完成了Android端Asset Pack的基础配置（对应指定的Asset Pack目录结构），并创建了平台区分的资源路径文件：

已创建的文件内容 #

assets.ios.ts #

export const data = {
    image: require('../../../android/g_asset_pack/src/main/assets/images')
}

asset.android.ts #

export const data = {
    image: '../../../android/g_asset_pack/src/main/assets'
}

我尝试通过以下方式加载图片，但无法正常显示：

<Image source={{ uri: "assets:images/Final_Art.jpeg" }} style={{height:100,width:200,resizeMode:'cover'}}/>

解决步骤 #

1. 确认Asset Pack的Gradle配置 #

• 检查g_asset_pack目录下的build.gradle，确保Asset Delivery类型和包名配置正确：

  plugins {
      id 'com.android.asset-pack'
  }
  
  assetPack {
      packName = "g_asset_pack" // 必须与目录名一致
      dynamicDelivery {
          deliveryType = "install-time" // 根据需求选择install-time/fast-follow/on-demand
      }
  }
  

• 主App的build.gradle中必须声明依赖该Asset Pack：

  dependencies {
      implementation "com.google.android.play:core-asset-delivery:2.2.0"
      assetPack project(":g_asset_pack")
  }
  

2. 修正React Native的资源访问逻辑 #

React Native无法直接通过assets:协议访问Play Asset Delivery的资源，需要通过文件路径读取：

• 安装react-native-fs库来获取文件系统路径：

  npm install react-native-fs --save
  

• 编写工具函数获取Asset Pack的实际安装路径并加载图片：

  import RNFS from 'react-native-fs';
  import { useState, useEffect } from 'react';
  import { Image } from 'react-native';
  
  // 获取Asset Pack的设备存储路径（替换为你的App包名）
  const getAssetPackBasePath = async () => {
      const packageName = "com.your.appname";
      return `${RNFS.ExternalStorageDirectoryPath}/Android/data/${packageName}/files/asset_packs/g_asset_pack`;
  };
  
  // 组件中使用示例
  const AssetImage = () => {
      const [source, setSource] = useState(null);
  
      useEffect(() => {
          const loadImage = async () => {
              const basePath = await getAssetPackBasePath();
              const imageUri = `file://${basePath}/images/Final_Art.jpeg`;
              setSource({ uri: imageUri });
          };
          loadImage();
      }, []);
  
      return source ? (
          <Image source={source} style={{height:100,width:200,resizeMode:'cover'}}/>
      ) : null;
  };
  

3. 排除Asset Pack目录避免RN重复打包 #

在metro.config.js中添加黑名单，防止RN打包工具处理Asset Pack内的资源：

module.exports = {
    resolver: {
        blacklistRE: /android\/g_asset_pack\/.*/,
    },
};

4. 验证Asset Pack的交付状态 #

• 使用bundletool生成包含Asset Pack的测试APK，或者上传到Google Play内部测试渠道，确保Asset Pack被正确下载安装到设备。

内容的提问来源于stack exchange，提问作者Heena Tandlekar