React Native学习之 Image组件

静态图片资源

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

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

注意：一些老文章和教程提到的require('image!xxx')的写法已经从0.40版本开始不再支持！

为了使新的图片资源机制正常工作，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}

使用混合App的图片资源

如果你在编写一个混合App(一部分UI使用React Native，而另一部分使用平台原生代码)，也可以使用已经打包到App中的图片资源（以拖拽的方式放置在Xcode的asset类目中，或者放置在Android的drawable目录里）。注意此时只使用文件名，不带路径也不带后缀：

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

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

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

注意：这些做法并没有做任何安全检查，需要自己确保图片在应用中确实存在，而且还需要指定尺寸

加载网络图片

我们需要给定图片的宽高或者知道图片的宽高比才能展示图片。

//正确
<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'}}/>

Uri数据图片

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

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

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

在Android上支持GIF和WebP格式图片

默认情况下Android是不支持GIF和WebP格式的，需要在 android/app/build.gradle 文件中手动添加以下模块：

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  compile 'com.facebook.fresco:animated-base-support:1.10.0'

  // 如果你需要支持GIF动图
  compile 'com.facebook.fresco:animated-gif:1.10.0'

  // 如果你需要支持WebP格式，包括WebP动图
  compile 'com.facebook.fresco:animated-webp:1.10.0'
  compile 'com.facebook.fresco:webpsupport:1.10.0'

  // 如果只需要支持WebP格式而不需要动图
  compile 'com.facebook.fresco:webpsupport:1.10.0'
}