react native 自定义Image实现预加载图片及错误之后图片显示

使用自定义Image直接移步到文章结尾查看使用

需要添加的第三方库，prop-types，添加如下

npm install --save prop-types

我们知道react native 里面的Image组件，预加载图片只实现了ios，android没有。加载错误的图片也没有。不能满足我们的基本需求。那么要才能满足双平台呢。

 

图片.png

 

首先我们预览一下，Image的所有属性，如下

 

图片.png

我们发现onError属性，这样我们可以在加载错误后替换本地资源图片就实现了加载错误图片的显示。我们设置一个state来标记，代码如下

export default class CustomImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            type:0,//0,正常加载，1加载错误，
        }
    }
    static propTypes={
        uri:PropTypes.string.isRequired,//
        errImage:PropTypes.number,//
    }
    static  defaultProps={
        errImage:require('../image/net_error.png'),
    }
    render() {
        const {uri,errImage,style}=this.props;
        let source={uri};
        if(this.state.type===1){
             source=errImage;
        }
        return (
        <Image
            source={source}
            style={[{width:100,height:100,backgroundColor:'red'},style]}
            onError={(error)=>{
                this.setState({
                    type:1,
                })
            }}
        />
        );
    }
}

我们看看效果，引用代码如下

  <CustomImage uri={'https://facebook.github.io/react-native/docs/assets/favicon.png'} style={{width:200,height:150}} errImage={require('../image/ic_image_kong.png')}/>

加载正确图片

 

我们把路径uri改错,显示如下

 

加载错误显示的结果

 

现在我们实现预加载图片。我们在属性里面发现，有一个加载开始，加载结束方法。onLoadSart 和onLoadEnd方法，这样在加载开始于结束之间，我们让他显示预加载图片。
但是在我准备这样实现的时候发现，source里面放了本地预加载图片，这不就监听不到了吗。看来只能用预加载图片先覆盖加载中图片。等完成再显示出来。当然如果只是ios，直接用defaultSource就好。
完整代码如下，

import React, {Component} from 'react';
import {Image, StyleSheet, View} from "react-native";
import PropTypes from 'prop-types';
/**
 * 自定义图片
 */
export default class CustomImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoadComplete: false,
            type: 0,//0,正常加载，1加载错误，
        }
    }
    static propTypes = {
        uri: PropTypes.string.isRequired,//图片路径，必填
        errImage: PropTypes.number,// 加载错误图片，可不传
        defaultImage:PropTypes.number,//预加载图片
    }
    static  defaultProps = {
        defaultImage:require('../image/ic_image_delete.png'),
        errImage: require('../image/net_error.png'), //默认加载错误图片，可在此统一设置
    }

    render() {
        const {uri,defaultImage,errImage, style} = this.props;
        let source = {uri};
        if (this.state.type === 1) {
            source = errImage;
        }
        return (
            <View style={[styles.imgDefault,style]}>
                <Image
                    source={source}
                    style={[styles.imgDefault,{overflow: 'hidden', position: 'absolute',}, style]}
                    onError={(error) => {
                        this.setState({
                            type: 1,
                        })
                    }}
                    onLoadEnd={() => {
                        this.setState({
                            isLoadComplete: true,
                        })
                    }}
                />
                {this.state.isLoadComplete ?null: <Image style={[styles.imgDefault,style]} source={defaultImage}/> }
            </View>
        );
    }
}
const styles = StyleSheet.create({
    imgDefault: {
        width: 100,
        height: 100,
    },
});

作者：偏爱墨绿色
链接：https://www.jianshu.com/p/6181e9b42c7b
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。