使用自定義Image直接移步到文章結(jié)尾查看使用

需要添加的第三方庫叠洗，prop-types甘改，添加如下

npm install --save prop-types

我們知道react native 里面的Image組件，預加載圖片只實現(xiàn)了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改錯,顯示如下

加載錯誤顯示的結(jié)果

現(xiàn)在我們實現(xiàn)預加載圖片。我們在屬性里面發(fā)現(xiàn)惭载，有一個加載開始旱函，加載結(jié)束方法。onLoadSart 和onLoadEnd方法描滔，這樣在加載開始于結(jié)束之間棒妨，我們讓他顯示預加載圖片。
但是在我準備這樣實現(xiàn)的時候發(fā)現(xiàn)含长，source里面放了本地預加載圖片券腔，這不就監(jiān)聽不到了嗎【信ⅲ看來只能用預加載圖片先覆蓋加載中圖片纷纫。等完成再顯示出來。當然如果只是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'), //默認加載錯誤圖片剖笙，可在此統(tǒng)一設(shè)置
    }

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

歡迎評論區(qū)討論相互學習。

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