前言
很多時候React Native在引入資源文件的時候比如SVG，JSON文件資源的時候，需要把文件放在對應(yīng)的原生工程里面去（IOS和Android分別放入），這樣其實對于資源使用的整理是很麻煩的，其實官網(wǎng)也是有考慮到這個問題的，在React Native中文文檔的圖片-靜態(tài)資源說明中也有提到（點擊此處連接）。
這個配置是在node_modules文件及里面的metro打包工具下，從這里可以看到React Native支持的文件格式，我們只要往里面添加想要的格式就可以。
當(dāng)然，你也可以從外部導(dǎo)入，在React Native創(chuàng)建項目的時候，也會生成一個名為metro.config.js的配置文件，直接在這里面添加就可以（注意，直接添加的話會覆蓋之前的配置文件的內(nèi)容，需要通過...方式進行添加）。
/**
* 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',//這里添加你需要支持的格式
],
},
};
當(dāng)然metro還可以添加各種配置，具體可以見Metro官網(wǎng)。
如何使用資源文件
使用的方式其實就是跟平常的React Native引入資源的方式是一樣的，直接require()進行引入就行，我們這里舉一個例子。
console.log('資源導(dǎo)入', require('../image/powerLine.svga'));
log打出的效果如下：
會發(fā)現(xiàn)打出來的是一個Int類型的數(shù)字，這是React Native內(nèi)部給每一個資源文件定義的Id編號，require()方法是在編譯階段就會生效的，但是如果給一個編號我們該怎么使用呢，對于這個，React Native的Image組件有提供一個方法（此處鏈接）。
該方法會根據(jù)資源Id來返回一個ImageSource對象，里面有包含文件的uri等相關(guān)信息，uri的返回結(jié)果在debug模糊和release會稍微不同。
debug模式返回的結(jié)果為：
console.log('資源導(dǎo)入結(jié)果', Image.resolveAssetSource(require('../image/powerLine.svga')));
//log輸出
資源導(dǎo)入結(jié)果 {"__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服務(wù)器上面去，url的話就可以傳到原生自己去處理了。
release的返回結(jié)果為（Android）：
在release模式下返回的結(jié)果其實就是這個資源文件的名字，這是因為React Native會通過Metro打包工具來吧外部依賴的資源文件全部進行打包進apk，并且小重新命名，它的命名規(guī)則是路徑路徑資源文件名字，而我們直接打開apk則可以在raw下看到這個文件，我們自己自定義支持的文件格式都會被打到raw文件夾下（經(jīng)小部分測試，部分React Native官方支持的文件格式也會被打包進raw文件夾下，比如ttf和svg等，暫時沒找到怎么自定義打包資源路徑，如果有知道的大神請指教）。
既然是在raw下，而且有資源文件的名字的話，我們就可以直接拿到文件的uri了。
拿到文件的uri，imageUri為React Native傳遞過來的文件名字
Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + mContext.getPackageName() + "/raw/" + imageUri)
//后續(xù)進行業(yè)務(wù)邏輯處理
至于IOS的release模式下，拿到的是一個路徑而不是文件名字，需要另外做處理，然后在傳遞給原生進行業(yè)務(wù)處理。
let uri = Image.resolveAssetSource(require('../image/powerLine.svga')).uri;
if (Platform.OS === 'ios' && uri.indexOf('file:///') !== -1) {
uri = uri.substring(8, uri.length);
}
//uri傳遞給原生進行處理
......
