20180307修改:
第一种
Image有另外一个属性可以直接设置占位图:loadingIndicatorSource
iOS、安卓都能用(划重点)不过在老点的RN版本上使用会无效
第二种
属性defaultSource
不过只适用于iOS
第三种
自己封装
代码:
react-native-img-cache
是图片缓存库,不用也是可以的。
import React, { Component } from 'react'
import { View, Image,Platform } from 'react-native'
import {CachedImage} from "react-native-img-cache"
class SMCImage extends Component {
constructor(props){
super(props);
this.state={
showDefault:true,
}
}
render(){
const {source,style} = this.props;
return (
this.state.showDefault
? <View>
<CachedImage style={{...style}} source={require('../../../static/images/bg_light.png')} resizeMode='cover'/>
<CachedImage style={{width:1,height:1}} source={source} onLoadStart={() => this.setState({showDefault: true})} onLoad={() => this.setState({showDefault: false})}/>
</View>
: <CachedImage style={{...style}} source={source}/>
);
}
}
export default SMCImage;
利用Image的onLoadStart与onLoad,切换Image控件的显示与隐藏,使用与Image一样,只不过我这里的默认占位图是写里头的,可以作为一个属性暴露出来