使用自定義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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。