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

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

npm install --save prop-types

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

图片.png

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

图片.png

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,
    },
});

欢迎评论区讨论相互学习。

---------------------完-------------------------