Expo React Native中PAD资产包的相对路径及图片渲染疑问

一、渲染myImage.png的路径与方法 #

你通过PAD交付的资产包无法直接用Expo默认的require()引用，因为这类原生资产目录不在Expo的资源解析范围内。以下是可行的加载方式：

使用expo-assets + expo-file-system #

1. 先安装依赖：

npx expo install expo-assets expo-file-system

2. 在App.js中动态加载资产：

import { Image, useState, useEffect } from 'react-native';
import { Asset } from 'expo-assets';
import * as FileSystem from 'expo-file-system';

export default function App() {
  const [imageUri, setImageUri] = useState(null);

  useEffect(() => {
    async function loadAsset() {
      // 通过原生桥接或PAD API获取资产包实际路径（示例为占位路径，需替换为真实路径）
      const assetPackBasePath = await getAssetPackPathFromNative();
      const imagePath = `${assetPackBasePath}myImage.png`;
      
      // 验证文件是否存在
      const fileExists = await FileSystem.getInfoAsync(imagePath);
      if (fileExists.exists) {
        const asset = Asset.fromURI(imagePath);
        await asset.downloadAsync();
        setImageUri(asset.localUri);
      }
    }
    loadAsset();
  }, []);

  if (!imageUri) return null;

  return (
    <Image
      source={{ uri: imageUri }}
      style={{ height: 50, width: 50 }}
    />
  );
}

获取PAD资产包的真实路径 #

PAD资产包的安装路径无法硬编码，需通过Android原生代码获取后传递给JS侧：
在Android项目的MainApplication.java中添加方法：

import android.content.pm.PackageManager;
import android.content.pm.SplitInfo;
import java.util.List;

// 新增方法获取资产包路径
public String getAssetPackPath() {
    PackageManager pm = getPackageManager();
    List<SplitInfo> splits = pm.getInstalledSplits(getPackageName());
    for (SplitInfo split : splits) {
        if (split.getName().equals("my_asset_pack")) {
            return split.getSplitFile().getPath() + "/assets/";
        }
    }
    return "";
}

然后通过NativeModules.MainApplication.getAssetPackPath()在JS侧调用该方法获取路径。

二、更规范的资产管理方式 #

• 统一使用Expo原生资产机制：将所有资产放在项目根目录的assets文件夹，在app.json中配置assetBundlePatterns，让Expo自动处理大资产拆分：

{
  "expo": {
    "assetBundlePatterns": ["assets/**/*"]
  }
}

此时直接用require('./assets/myImage.png')即可引用，Expo会自动处理资产的打包与交付。

• 关联PAD资产包到Expo配置：若必须使用PAD，在app.json的Android配置中声明资产包：

{
  "expo": {
    "android": {
      "assetPacks": [
        {
          "name": "my_asset_pack",
          "deliveryType": "install-time"
        }
      ]
    }
  }
}

这样Expo构建时会自动关联资产包，同时可通过Expo API简化路径获取。

三、查看应用内部文件结构 #

使用expo-file-system的目录读取方法即可查看：

import * as FileSystem from 'expo-file-system';

async function inspectFileSystem() {
  // 查看应用文档目录
  const docDirContents = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory);
  console.log('文档目录内容:', docDirContents);

  // 查看Android原生资产目录
  const androidAssetContents = await FileSystem.readDirectoryAsync(FileSystem.androidAssetsDirectory);
  console.log('Android资产目录内容:', androidAssetContents);
}

调用该方法可在控制台输出应用内部的文件结构，帮助确认资产包位置。

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