前言

很多時候React Native在引入資源文件的時候比如SVG绪励，JSON文件資源的時候攒霹，需要把文件放在對應的原生工程里面去（IOS和Android分別放入），這樣其實對于資源使用的整理是很麻煩的穆刻，其實官網(wǎng)也是有考慮到這個問題的亲轨，在React Native中文文檔的圖片-靜態(tài)資源說明中也有提到（點擊此處連接）妄讯。

如何使用非圖片資源

這個配置是在node_modules文件及里面的metro打包工具下，從這里可以看到React Native支持的文件格式衙荐，我們只要往里面添加想要的格式就可以捞挥。

默認支持的格式

當然浮创，你也可以從外部導入忧吟，在React Native創(chuàng)建項目的時候，也會生成一個名為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官網(wǎng)。

如何使用資源文件

使用的方式其實就是跟平常的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蛋褥，并且小重新命名，它的命名規(guī)則是路徑路徑資源文件名字睛驳，而我們直接打開apk則可以在raw下看到這個文件烙心，我們自己自定義支持的文件格式都會被打到raw文件夾下（經(jīng)小部分測試，部分React Native官方支持的文件格式也會被打包進raw文件夾下乏沸，比如ttf和svg等淫茵，暫時沒找到怎么自定義打包資源路徑，如果有知道的大神請指教）蹬跃。

apk下的的文件路徑

拿到文件的uri丹喻，imageUri為React Native傳遞過來的文件名字
Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + mContext.getPackageName() + "/raw/" + imageUri)
//后續(xù)進行業(yè)務邏輯處理

至于IOS的release模式下薄货，拿到的是一個路徑而不是文件名字，需要另外做處理碍论，然后在傳遞給原生進行業(yè)務處理谅猾。

let uri = Image.resolveAssetSource(require('../image/powerLine.svga')).uri;
if (Platform.OS === 'ios' && uri.indexOf('file:///') !== -1) {
  uri = uri.substring(8, uri.length);
}
//uri傳遞給原生進行處理
......