资源文件一共有三种类型：原生包资源、JS 引用资源、远程资源

一、原生包资源

对于完全使用 RN 开发的 app 而言，此种类型的资源用的比较少，一般用在纯原生和 RN 相结合的 app 中

Android

资源文件保存在 /android/app/src/main/res 目录下的 drawable 和 raw 目录（若不存在可手动创建），其中 drawable 目录下存储图片资源，raw 目录下存储非图片资源。除了直接使用名称之外，还可在目录名中添加各种限制条件，在不同条件下使用不同资源，具体可通过 Android Studio 查看

android.png

iOS

通过 xcode 拖拽方式将资源文件添加到原生包，其中 **.xcassets 目录类似于 android 的 drawable，用于存放图片资源，默认仅有 Images.xcassets，一般有这一个就够了，但也可以新建目录，最终所有 **.xcassets 目录内文件都会打包到 ipa 内的 Assets.car 文件。点击具体图片资源，可以在右侧添加限制条件，以便在不同条件下使用不同资源。

其他类型文件可以直接拖拽至项目即可，但不像 android 那样可以设置限制条件了，仅作为静态资源。

ios.png

二、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 返回值遵照以下规则

1. debug 模式，uri:'http://' 返回 debug 模式下 server 代理的 http 地址
2. release 模式，参考上面 js 资源打包规则
   • android: 返回资源 name，与原生模式下直接放到 res 目录下相同
   • iOS: 返回 file://assets/name，即资源的绝对路径

对于图片资源，直接使用 source={require('source')} 即可，Image 组件会选用对应 scale 的图片，自动处理为 {{uri:''}}，对于非图片资源，同样的，需要对应的第三方组件进行相应处理。

3. 远程资源

同样的，图片资源使用 Image 组件，支持远程地址，其他类型需第三方组件进行相应处理

 <Image source={{uri: 'https://....'}} />