前言

很多时候React Native在引入资源文件的时候比如SVG，JSON文件资源的时候，需要把文件放在对应的原生工程里面去（IOS和Android分别放入），这样其实对于资源使用的整理是很麻烦的，其实官网也是有考虑到这个问题的，在React Native中文文档的图片-静态资源说明中也有提到（点击此处连接）。

如何使用非图片资源

这个配置是在node_modules文件及里面的metro打包工具下，从这里可以看到React Native支持的文件格式，我们只要往里面添加想要的格式就可以。

默认支持的格式

当然，你也可以从外部导入，在React Native创建项目的时候，也会生成一个名为metro.config.js的配置文件，直接在这里面添加就可以（注意，直接添加的话会覆盖之前的配置文件的内容，需要通过...方式进行添加）。

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

// get defaults assetExts array
const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    assetExts: [
      ...defaultAssetExts, // <- array spreading defaults
      'svga',//这里添加你需要支持的格式
    ],
  },
};

当然metro还可以添加各种配置，具体可以见Metro官网。

如何使用资源文件

使用的方式其实就是跟平常的React Native引入资源的方式是一样的，直接require()进行引入就行，我们这里举一个例子。

console.log('资源导入', require('../image/powerLine.svga'));

log打出的效果如下：

打印结果

方法说明

debug模式返回的结果为：

console.log('资源导入结果', Image.resolveAssetSource(require('../image/powerLine.svga')));

//log输出
 资源导入结果 {"__packager_asset": true, "height": undefined, "scale": 1, "uri": "http://localhost:8081/assets/assets/powerLine.svga?platform=android&hash=42cddc5c14b5521e54c68fd62caed73a", "width": undefined}

debug模式下会得到资源文件的url地址连接，这是因为React Native会debug模式中会把所有资源文件打包到index.js服务器上面去，url的话就可以传到原生自己去处理了。

release的返回结果为（Android）：

release返回的结果

在release模式下返回的结果其实就是这个资源文件的名字，这是因为React Native会通过Metro打包工具来吧外部依赖的资源文件全部进行打包进apk，并且小重新命名，它的命名规则是路径路径资源文件名字，而我们直接打开apk则可以在raw下看到这个文件，我们自己自定义支持的文件格式都会被打到raw文件夹下（经小部分测试，部分React Native官方支持的文件格式也会被打包进raw文件夹下，比如ttf和svg等，暂时没找到怎么自定义打包资源路径，如果有知道的大神请指教）。

apk下的的文件路径

拿到文件的uri，imageUri为React Native传递过来的文件名字
Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + mContext.getPackageName() + "/raw/" + imageUri)
//后续进行业务逻辑处理

至于IOS的release模式下，拿到的是一个路径而不是文件名字，需要另外做处理，然后在传递给原生进行业务处理。

let uri = Image.resolveAssetSource(require('../image/powerLine.svga')).uri;
if (Platform.OS === 'ios' && uri.indexOf('file:///') !== -1) {
  uri = uri.substring(8, uri.length);
}
//uri传递给原生进行处理
......