Image组件

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

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

案例

import React,{Component} from 'react';
import {View, StyleSheet, SafeAreaView, Text, Image, Alert, Button} from 'react-native';class Index extends Component {state = {imgUrlObj : {defaultImgUrl : 'http://qlogo1.store.qq.com/qzone/2351723616/2351723616/100.img',currentImgUrl : 'https://profile.csdnimg.cn/B/3/3/2_qq_36833171.png'},}setCurrentImg = (url) => {const {imgUrlObj} = this.state;let stateObj = Object.assign({}, imgUrlObj,{currentImgUrl:url});this.setState({imgUrlObj: stateObj});}setCurrentImgToDefault = () => {this.setCurrentImg(this.state.imgUrlObj.defaultImgUrl);}render() {const {defaultImgUrl:def,currentImgUrl:cur} = this.state.imgUrlObj;return (<SafeAreaView style={{flex: 1}}><ButtononPress={()=>this.setCurrentImg("http://qlogo4.store.qq.com/qzone/1700754239/1700754239/100")}title="更换图片"/><Viewstyle={[{flex: 1},{alignItems: 'center'}]}><Imagesource={{uri: cur,width: 200,height: 200,}}// 当加载错误的时候调用此回调函数。onError={this.setCurrentImgToDefault}// 下载进度的回调事件onProgress={()=>{console.log("onProgress")}}// 加载结束后，不论成功还是失败，调用此回调函数。onLoadEnd={()=>{console.log("onLoadEnd")}}resizeMode='stretch' // cover，contain，stretch，repeat，center// blurRadius={10}/>        </View></SafeAreaView>);}
}const styles = StyleSheet.create({})
export default Index;