ReactNative Image组件使用详解(2)

dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) compile 'com.facebook.fresco:animated-base-support:1.0.1' // For animated GIF support compile 'com.facebook.fresco:animated-gif:1.0.1' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:1.0.1' compile 'com.facebook.fresco:webpsupport:1.0.1' // For WebP support, without animations 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); }

ImageBackground

该组件是Image组件的扩展，它支持嵌套组件。如在图片上显示一个文本，则可以通过如下实现

<ImageBackground style={{width: 100, height: 100, backgroundColor: 'transparent'}} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} > <Text style={styles.nestedText}> React </Text> </ImageBackground>

实现效果图如下，一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载，当加载完成隐藏此控件。

网络图片加载监听

对于网络图片的加载，ReactNative提供了一些属性用于图片不同加载时期的监听。

onLoadStart：图片开始加载时调用

onLoad：图片加载完成时调用，此时图片加载成功

onLoadEnd：加载结束后调用，与onLoad不同的是不论成功还是失败，此回调函数都会被执行。

使用方法如下

<Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} style={[styles.base, {overflow: 'visible'}]} onLoadStart={() => console.log('onLoadStart')} onLoad={(event) => console.log('onLoad') } onLoadEnd={() => console.log('onLoadEnd')} />

对于iOS，还提供了加载进度的回调函数onProgress

<Image style={styles.image} onProgress={(event) => { console.log('onProgress') this.setState({ progress: Math.round(100 * event.nativeEvent.loaded / event.nativeEvent.total) })}}/>

可以通过参数event.nativeEvent.loaded获取已经加载的大小，通过event.nativeEvent.total获取图片的总大小。

不仅如此，ReactNative还提供了预加载图片函数prefetch(url: string)，它可以将图片下载到磁盘缓存

var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png'); prefetchTask.then(() => { //此处可设置状态，显示Image组件。此时组件会使用预加载的图片信息。而不用再次加载 console.log('加载图片成功') }, error => { console.log('加载图片失败') })

好了，今天就介绍到这里，文中若有错误的地方欢迎指正，再次感谢。文中一些示例源码，可前往GitHub在线预览，也可以下载项目学习其他组件。