React-Native：如何加载本地打包的固件更新Zip文件

我完全懂你现在的头疼——想把固件Zip和React Native应用一起打包，却卡在了加载文件这一步，不想手动维护Android和iOS的资源目录绝对是合理的诉求。折腾三小时没搞定这种基础问题确实让人烦躁，下面给你几个经过验证的可行方案：

方案一：修改Metro配置，让Zip作为Asset被打包，再用React Native FS读取 #

Metro默认不会把Zip文件当作可打包的资源，所以第一步要修改它的配置，把Zip加入允许的资源扩展名列表：

1. 在项目根目录找到metro.config.js（如果没有就新建一个），添加以下配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const customConfig = {
  resolver: {
    // 把zip添加到默认的资源扩展名数组里
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'zip'],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

2. 修改完配置后必须重启Metro服务，否则新配置不会生效。

3. 现在你可以通过require获取Zip资源的正确URI，再用React Native FS读取内容：

import RNFS from 'react-native-fs';

const loadFirmwareZip = async () => {
  try {
    // require会返回包含资源URI的对象
    const zipAsset = require('./firmware/fw.zip');
    // 读取二进制内容，用base64编码方便后续传给Zip处理库（比如jszip）
    const zipBase64 = await RNFS.readFile(zipAsset.uri, 'base64');
    
    // 这里就可以把zipBase64传给你的Zip校验库了，比如jszip.loadAsync(zipBase64)
    console.log('Zip内容加载成功');
  } catch (error) {
    console.error('加载Zip失败:', error);
  }
};

方案二：用rn-fetch-blob读取打包后的Zip资源 #

如果你觉得React Native FS的路径问题容易踩坑，也可以用rn-fetch-blob来读取Asset资源，它对二进制文件的处理也很友好：

1. 先安装依赖：

npm install rn-fetch-blob
# 或者yarn add rn-fetch-blob

2. 同样需要先完成方案一中的Metro配置修改（让Zip被打包），然后用以下代码读取：

import RNFetchBlob from 'rn-fetch-blob';

const loadZipWithFetchBlob = async () => {
  try {
    const zipAsset = require('./firmware/fw.zip');
    // 发起GET请求获取Asset资源
    const response = await RNFetchBlob.fetch('GET', zipAsset.uri);
    // 获取base64格式的内容，或者用response.data()获取ArrayBuffer
    const zipContent = response.base64();
    
    // 后续校验逻辑
  } catch (error) {
    console.error('加载失败:', error);
  }
};

为什么你之前的方法失败了？ #

• require('./firmware/fw.zip')：Metro默认不把Zip列为可打包资源，所以打包时直接忽略了这个文件，自然找不到。
• 临时用PDF的方案：旧版React Native会返回资源ID（就是你看到的数字5），但这个ID只能用于系统资源（比如图片），没法直接获取二进制内容，而且新版RN已经改成返回URI了，这个方案本来就走不通。
• RNFS直接用相对路径/MainBundlePath：Metro打包后，资源会被放到Android的assets目录或iOS的Main Bundle里，原来的相对路径已经失效；而Android上MainBundlePath可能因为RNFS版本或配置问题返回undefined，通过require获取URI才是最可靠的方式。

注意事项 #

• 确保Metro配置修改后重启服务，否则Zip文件还是不会被打包。
• 大多数Zip处理库（比如jszip）都支持直接解析base64格式的内容，所以读取时用base64编码是最方便的。
• 如果你用的是较旧的React Native版本（0.60以下），可能需要手动链接RNFS或rn-fetch-blob，但新版已经支持自动链接，无需额外操作。

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