React Native嵌入原生应用：首次启动打包图片不显示求助

这种首次启动本地图片加载失败、后续正常的情况，我之前在集成RN到原生项目时也遇到过，核心原因是首次初始化RN实例时，RN的资源解析机制还没完全准备好——尤其是离线Bundle的本地资源映射还没建立完成，而远程图片因为走的是网络请求，不受这个机制影响。结合你的情况（Base64可行，说明Bundle本身没问题），给你几个针对性的解决方案：

1. 原生端确保资源路径配置正确并预加载资源 #

不管是Android还是iOS，都要确保离线Bundle和对应的资源文件被放在RN能访问到的位置，并且在创建RN实例时明确指定资源目录。以Android为例：

// 在原生Activity中创建ReactInstanceManager时
ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setBundleAssetName("index.android.bundle") // 你的离线Bundle文件名
        .setJSMainModulePath("index")
        .addPackage(new MainReactPackage())
        // 明确设置资源目录，让RN能找到本地图片
        .setResourceDirs(Arrays.asList(getResources().getAssets()))
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED);

iOS端则要确保Bundle和资源文件被添加到项目的Copy Bundle Resources中，并且在初始化RCTBridge时指定正确的Bundle路径。

2. RN端手动解析本地资源路径 #

首次启动时，RN的require加载本地图片可能无法正确解析路径，你可以用Image.resolveAssetSource手动处理资源，强制生成正确的URI：

import { Image, Platform } from 'react-native';

// 封装一个本地图片加载工具函数
const getLocalImageSource = (asset) => {
  const resolvedSource = Image.resolveAssetSource(asset);
  // 针对Android离线Bundle，可能需要调整URI前缀
  if (Platform.OS === 'android' && resolvedSource.uri && !resolvedSource.uri.startsWith('http')) {
    return {
      ...resolvedSource,
      uri: `file:///android_asset/${resolvedSource.uri.split('/').pop()}`
    };
  }
  return resolvedSource;
};

// 使用方式
<Image 
  source={getLocalImageSource(require('./assets/your-local-image.png'))} 
  style={{ width: 100, height: 100 }}
/>

这个方法绕过了RN首次初始化时的资源映射问题，直接生成可访问的本地文件URI。

3. 延迟渲染图片直到资源就绪 #

可以监听RN的AppState或者等待原生端发送资源就绪的通知，等资源加载机制准备完成后再渲染图片：

import { Image, AppState, useEffect, useState } from 'react-native';

function LocalImageViewer() {
  const [isResourceReady, setIsResourceReady] = useState(false);

  useEffect(() => {
    const appStateListener = AppState.addEventListener('change', (state) => {
      // 当App变为活跃状态后，延迟一点时间确保资源映射完成
      if (state === 'active' && !isResourceReady) {
        setTimeout(() => setIsResourceReady(true), 600);
      }
    });

    return () => appStateListener.remove();
  }, []);

  if (!isResourceReady) {
    return null; // 或者显示一个加载占位符
  }

  return <Image source={require('./assets/your-local-image.png')} />;
}

4. 检查离线Bundle的打包命令 #

确保你打包离线Bundle时，资源文件被正确输出到原生项目能访问的位置。比如Android的打包命令：

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

--assets-dest参数会把图片资源输出到Android的res目录，确保RN能正确解析。

为什么Base64可行？ #

因为Base64是直接把图片编码成字符串嵌入到Bundle中的，不需要RN去读取本地文件路径，所以不受首次初始化时资源解析机制未就绪的影响，这也验证了你的Bundle本身是没问题的。

你可以先试试方案2或者方案4，这两个是我之前解决类似问题最有效的方法。

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