React Native开发——Image组件

React Native开发——Image组件

Image是一个用于显示多种不同类型的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

加载图片

renderImages() {  return (    <View>      <Image        style={styles.icon}        source={require('./icon.png')}      />      <Image        style={styles.logo}        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}      />    </View>  ); }

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

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

dependencies {  // 如果你需要支持Android4.0(API level 14)之前的版本compile 'com.facebook.fresco:animated-base-support:1.0.1'// 如果你需要支持GIF动图compile 'com.facebook.fresco:animated-gif:1.0.1'// 如果你需要支持WebP格式，包括WebP动图compile 'com.facebook.fresco:animated-webp:1.0.1'compile 'com.facebook.fresco:webpsupport:1.0.1'// 如果只需要支持WebP格式而不需要动图compile 'com.facebook.fresco:webpsupport:1.0.1'}

如果你在使用GIF的同时还使用了ProGuard，那么需要在proguard-rules.pro中添加如下规则 :

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);}

参考：
http://reactnative.cn/docs/0.44/image.html#content