资源文件一共有三种类型：原生包资源、JS 引用资源、远程资源
一、原生包资源
对于完全使用 RN 开发的 app 而言，此种类型的资源用的比较少，一般用在纯原生和 RN 相结合的 app 中
Android
资源文件保存在 /android/app/src/main/res 目录下的 drawable 和 raw 目录（若不存在可手动创建），其中 drawable 目录下存储图片资源，raw 目录下存储非图片资源。除了直接使用名称之外，还可在目录名中添加各种限制条件，在不同条件下使用不同资源，具体可通过 Android Studio 查看
iOS
通过 xcode 拖拽方式将资源文件添加到原生包，其中 **.xcassets 目录类似于 android 的 drawable，用于存放图片资源，默认仅有 Images.xcassets，一般有这一个就够了，但也可以新建目录，最终所有 **.xcassets 目录内文件都会打包到 ipa 内的 Assets.car 文件。点击具体图片资源，可以在右侧添加限制条件，以便在不同条件下使用不同资源。
其他类型文件可以直接拖拽至项目即可，但不像 android 那样可以设置限制条件了，仅作为静态资源。
二、JS 资源
此类资源不在原生包内，可以随意放到任意文件夹，在 js 中通过 require 引用即可，支持的资源 文件类型 可以使用默认的，也可在 metro.config.js 自定义，需注意：自定义类型不是追加，而是覆盖。
const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;
module.exports = {
....
resolver: {
assetExts:[...defaultAssetExts, 'dat']
}
};
对于资源引用，如果是图片类型，还可使用 name@scale.png 针对不同分辨率保存多张，其中 scale 支持的值可 参考，最终被引用过的资源文件在 android 下会打包到 /android/app/src/main/res 下的 drawable 和 raw，在 iOS 下会打包到 ipa 内的 assets 目录
const img = require('./path/img/img.png');
const dat = require('./path/img/test.dat');
三、远程资源
这个没什么好讲的，可以引用在线的 https 资源。
四、资源的使用
1. 原生包资源
对于图片类型使用 Image 组件，直接指定文件名即可，同时适用于 android 的 drawable 和 iOS 的 **.xcassets，会自动引用符合当前限制条件的图片；对于非图片类型资源，则需要第三方组件的支持了，比如 mp4 文件需要 Video 组件支持。
import React from 'react';
import { View, Image} from 'react-native';
const App = () => {
return <View>
<Image source={{uri: 'dlp'}} />
</View>
};
export default App;
2. JS 资源
import React from 'react';
import { Text, View, Image} from 'react-native';
const App = () => {
const img = require('./path/img/img.png');
const img_src = Image.resolveAssetSource(img);
const dat = require('./path/img/test.dat');
const dat_src = Image.resolveAssetSource(dat);
return <View>
<Image source={img} />
<Text>{img}</Text>
<Text>{JSON.stringify(img_src)}</Text>
<Text>{dat}</Text>
<Text>{JSON.stringify(dat_src)}</Text>
</View>
};
export default App;
-
const img = require('source')返回数字 -
const img_src = Image.resolveAssetSource(img)返回 object
返回的 object 数据结构：
{
uri: 'http://|file://|name',
scale: 1, //当前设备分辨率对应的 scale
// 如果资源为图片格式，会返回尺寸，其他类型则没有这两个字段
width:100,
height:100,
}
其中 uri 返回值遵照以下规则
- debug 模式，
uri:'http://'返回 debug 模式下 server 代理的 http 地址 - release 模式，参考上面 js 资源打包规则
- android: 返回资源
name，与原生模式下直接放到res目录下相同 - iOS: 返回
file://assets/name，即资源的绝对路径
- android: 返回资源
对于图片资源，直接使用 source={require('source')} 即可，Image 组件会选用对应 scale 的图片，自动处理为 {{uri:''}}，对于非图片资源，同样的，需要对应的第三方组件进行相应处理。
3. 远程资源
同样的，图片资源使用 Image 组件，支持远程地址，其他类型需第三方组件进行相应处理
<Image source={{uri: 'https://....'}} />
