React Native 占位图解决方案

20180307修改:

第一种

Image有另外一个属性可以直接设置占位图:loadingIndicatorSourceiOS、安卓都能用(划重点)不过在老点的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一样,只不过我这里的默认占位图是写里头的,可以作为一个属性暴露出来

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容