React Native 占位图解决方案

作者: Lojii | 来源:发表于2018-03-02 09:43 被阅读248次

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一样,只不过我这里的默认占位图是写里头的,可以作为一个属性暴露出来

相关文章

网友评论

    本文标题:React Native 占位图解决方案

    本文链接:https://www.haomeiwen.com/subject/evmoxftx.html