React Native 之 图片使用（六）

静态图片资源

React Native项目中，图片文件的查找会和 JS 模块的查找方式一样。它提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它：

//资源属性是一个对象（object）,而且并不接受字符串，正确的值是一个带有uri属性的对象。
//这样可以使我们在对象中添加一些元数据(metadata)。
<Image source={require('./my-icon.png')} />

如果你有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。

可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构：

├── button.js
└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

并且button.js里有这样的代码：

<Image source={require('./img/check.png')} />

Packager 会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 7 会使用check@2x.png，而 iPhone 7 plus 或是 Nexus 5 上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。

这样使用的好处：

• iOS 和 Android 一致的文件系统。
• 图片和 JS 代码处在相同的文件夹，这样组件就可以包含自己所用的图片而不用单独去设置。
• 不需要全局命名。你不用再担心图片名字的冲突问题了。
• 只有实际被用到（即被 require）的图片才会被打包到你的 app。
• 现在在开发期间，增加和修改图片不需要重新编译了，只要和修改 js 代码一样刷新你的模拟器就可以了。
• 与访问网络图片相比，Packager 可以得知图片大小了，不需要在代码里再声明一遍尺寸。
• 现在通过 npm 来分发组件或库可以包含图片了。

为了使新的图片资源机制正常工作，require 中的图片名字必须是一个静态字符串（不能使用变量！因为 require 是在编译时期执行，而非运行时期执行！

// 正确
<Image source={require('./my-icon.png')} />;

// 错误
const icon = this.props.active
  ? 'my-icon-active'
  : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// 正确
const icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

静态的非图片资源

上面描述的require语法也可以用来静态地加载你项目中的声音、视频或者文档文件。大多数常见文件类型都支持，包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等。

也可以在metro(即 packager)配置文件中添加assetExts配置项来支持其他类型的文件。

需要注意的是视频必须指定尺寸而不能使用flex样式，因为我们目前还不能从非图片资源中获取到尺寸信息。对于直接链接到 Xcode 或者 Android 资源文件夹的视频，则不会有这个限制。

网络图片

<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache'
    },
    body: 'Your Body goes here'
  }}
  style={{ width: 400, height: 400 }}
/>

Uri 数据图片

如果前端拿到的是图片的 base64 数据，此时可以使用’data:'格式来显示图片。请注意，需要手动指定图片的尺寸。

建议仅对非常小的图片使用 base64 数据，比如一些小图标。

// 请记得指定宽高！
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
  }}
/>

最合适的相册图片

iOS 会为同一张图片在相册中保存多个不同尺寸的副本。为了性能考虑，从这些副本中挑出最合适的尺寸显得尤为重要。对于一处 200x200 大小的缩略图，显然不应该选择最高质量的 3264x2448 大小的图片。如果恰好有匹配的尺寸，那么 React Native 会自动为你选好。如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出 50%，以使图片看起来仍然足够清晰。这一切过程都是自动完成的，所以你不用操心自己去完成这些繁琐且易错的代码。

在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个 0x0
大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是 UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。

在React Native中，有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸（或宽高比），但我们相信这样可以带来更好的用户体验。然而，读取本地静态图片（使用require(‘./my-icon.png’)语法）则无需指定尺寸，因为它们的尺寸在加载时就可以立刻知道。

比如这样一个引用require(‘./my-icon.png’)的实际输出结果可能是：

//必须指定宽高样式。
{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

背景图片与嵌套写法

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);