react-native中的图片

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

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

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

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

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

请注意：经过这种方式引用的图片资源包含图片的尺寸（宽度，高度）信息，若是你须要动态缩放图片（例如，经过 flex），
你可能必须手动在 style 属性设置{ width: null, height: null }。
静态的非图片资源
上面描述的require语法也能够用来静态地加载你项目中的声音、视频或者文档文件。大多数常见文件类型都支持，
包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等（完整列表请看 packager defaults)。

你也能够建立本身的配置文件来支持其余类型的文件。具体的配置能够参考packager config file。

须要注意的是视频必须指定尺寸而不能使用flex样式，由于咱们目前还不能从非图片资源中获取到尺寸信息。
对于直接连接到 Xcode 或者 Android 资源文件夹的视频，则不会有这个限制。
使用混合 App 的图片资源
若是你在编写一个混合 App（一部分 UI 使用 React Native，而另外一部分使用平台原生代码），也可使用已经打包到 App 中的图片资源（以拖拽的方式放置在 Xcode 的 asset 类目中，或是放置在 Android 的 drawable 目录里）。注意此时只使用文件名，不带路径也不带后缀：

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

对于放置在 Android 的 assets 目录中的图片，还可使用asset:/ 前缀来引用：

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

注意：这些作法并无任何安全检查。你须要本身确保图片在应用中确实存在，并且还须要指定尺寸。
网络图片
不少要在 App 中显示的图片并不能在编译的时候得到，又或者有时候须要动态载入来减小打包后的二进制文件的大小。
这些时候，与静态资源不一样的是，你须要手动指定图片的尺寸。同时咱们强烈建议你使用 https 以知足 iOS App Transport Security
的要求。

// 正确
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />

// 错误
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

网络图片的请求参数
你能够在 Image 组件的 source 属性中指定一些请求参数，以下面的示例：

<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）
在某些状况下你可能仅仅想展现一张已经在本地缓存的图片，例如一个低分辨率的占位符，直到高分辨率的图片可用。又或者你无所谓图片是否过期，并且也不在意显示过期的图片，节省带宽相对更重要。缓存资源属性提供给了你控制网络层与缓存交互的方式。

default: 使用原平生台默认策略。
reload: URL 的数据将从原始地址加载。不使用现有的缓存数据。
force-cache: 现有的缓存数据将用于知足请求，忽略其期限或到期日。若是缓存中没有对应请求的数据，则从原始地址加载。
only-if-cached: 现有的缓存数据将用于知足请求，忽略其期限或到期日。若是缓存中没有对应请求的数据，则不尝试从原始地址加载，而且认为请求是失败的。

<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    cache: 'only-if-cached',
  }}
  style={{width: 400, height: 400}}
/>

为何不在全部状况下都自动指定尺寸呢?
在浏览器中，若是你不给图片指定尺寸，那么浏览器会首先渲染一个 0x0 大小的元素占位，而后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样作的最大问题是 UI 会在图片加载的过程当中上下跳动，使得用户体验很是糟糕。

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

好比这样一个引用require('./my-icon.png')的实际输出结果多是：

{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

资源属性是一个对象（object）
在 React Native 中，另外一个值得一提的变更是咱们把src属性改成了source属性，并且并不接受字符串，正确的值是一个带有uri属性的对象。

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

深层次的考虑是，这样可使咱们在对象中添加一些元数据(metadata)。假设你在使用require('./my-icon.png')，那么咱们就会在其中添加真实文件路径以及尺寸等信息（这只是举个例子，将来的版本中 require 的具体行为可能会变化）。此外这也是考虑了将来的扩展性，好比咱们可能会加入精灵图（sprites）的支持：在输出{uri: ...}的基础上，咱们能够进一步输出裁切信息{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}，这样理论上就能够在现有的代码中无缝支持精灵图的切分。

对于开发者来讲，则能够在其中标注一些有用的属性，例如图片的尺寸，这样可使图片本身去计算将要显示的尺寸（而没必要在样式中写死）。请在这一数据结构中自由发挥，存储你可能须要的任何图片相关的信息。

背景图片与嵌套写法
开发者们常面对的一种需求就是相似 web 中的背景图（background-image）。要实现这一用例，只需使用 组件（其 props 与 彻底相同），而后把须要背景图的子组件嵌入其中便可。

也可能你并不须要使用 ，由于它的实现其实很是简单，实质就是对图片使用了绝对定位。你能够阅读其文档而后思考你是否有更好更简单的布局方案。

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

注意你必须指定宽高样式。

iOS 边框圆角的注意事项
请注意下列边框圆角样式目前在 iOS 的图片组件上还不支持：

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius

在主线程外解码图片 图片解码有可能会须要超过一帧的时间。在 web 上这是页面掉帧的一大因素，由于解码是在主线程中完成的。然而在 React Native 中， 图片解码则是在另外一线程中完成的。在实际开发中，通常对图片还没下载完成时的场景都作了处理（添加 loading 等）， 而图片解码时显示的占位符只占用几帧时间，并不须要你改动代码去额外处理。 相关相册的那个demo明日解决