React Native 用CachedImageBackground组件加载网络照片（应用内缓存）

在开发项目中用到了照片的显示，所以在这里记录一下。

首先，我在这一用到了<CachedImageBackground>这个组件，下载的图片存储在应用缓存中。基本用法和Image组件一样。想了解此组件的可以网络搜索“CachedImage”，<CacheImage>组件已经过期，现在基本都用<CachedImageBackground>代替。这是我在网上搜到的基本介绍：CachedImage组件用于显示图片,该主要用于固定的图片地址，下载的图片主要存储在应用缓存中，显示的时候也是从应用缓存中读取。

照片显示这一块，我用的是两个modal，一进来，第一个modal的visible为false，所以不会显示，
而第二个modal为true，会显示，此时，会通过<CachedImageBackground>组件加载图片，
开始加载时执行onLoadStart方法，在其中更改判断中需要用到的一些属性，
在加载中<LoadingForShow>会显示“正在加载中”的图标
如加载成功，会执行<CachedImageBackground>组件的onLoad方法
最后不管加载图片结果是否成功，都会执行onLoadEnd方法

在第二个modal图片加载完后，第一个modal显示已经加载好的图片。
<CachedImageBackground>这个组件会将图片缓存在应用中，此时不需要网络加载，直接显示 

下面是我的具体实现，这一块肯能做的比较冗余，不是很好，有待修改

    <View style={{backgroundColor:'rgba(0, 0, 0, 1)'}}>
    {/*
    照片显示这一块，我用的是两个modal，一进来，第一个modal的visible为false，所以不会显示，而第二个modal为true，会显示，
    此时，会通过<CachedImageBackground>组件加载图片，开始加载时执行onLoadStart方法，在其中更改判断中需要用到的一些属性，在加载中<LoadingForShow>会显示“正在加载中”的图标
    如加载成功，会执行<CachedImageBackground>组件的onLoad方法
    最后不管加载图片结果是否成功，都会执行onLoadEnd方法

    在第二个modal图片加载完后，第一个modal显示已经加载好的图片.<CachedImageBackground>这个组件会将图片缓存在应用中，此时不需要网络加载，直接显示

    */}
{
/*
    TouchableWithoutFeedback  这个组件是为了在触摸这个modal时，退出这个modal
    <LoadingForShow>这个组件是显示一个加载中的图标（自己写的，可以从网上找）
*/
}
     <Modal
        visible={visible&&!this.state.loading}
        transparent={true}
        onRequestClose={onClose}>
         <TouchableWithoutFeedback
            ref={ref => {
                this.imgContainer = ref;
            }}
            onPress={
                this._closeModalByTap
            }>
            <View style={styles.mask} ref={mask => {
                this.mask = mask;
            }} {...this._pan.panHandlers}>
                    <View
                        ref={ref => {
                            this.content = ref;
                        }}
                        style={styles.content}
                    >
                        {console.log('loading 2',this.state.loading)}
                       {this.state.loading === true ?//由于一进来的时候，havePicture为null，所以如果不加此判定，一进来 会闪出一个自定义的破损的图片，效果不好，所以加了此行判定
                               null
                                :
                                this.state.havePicture === true ?
                                //判断是否有照片，没有就加载默认的破损图，有就加载应用缓存中的照片
                                    <CachedImageBackground
                                        source={this.props.source}
                                        style={[size, styles.img,]}
                                        resizeMode={'contain'}
                                    />
                                    :
                                    <Image
                                    source={this.state.source}
                                    style={[size, styles.img,]}
                                    resizeMode={'contain'}
                                    />
                        }
                    </View>
            </View>
        </TouchableWithoutFeedback>
    </Modal>

    <Modal
        visible={visible}
        transparent={true}
        onRequestClose={onClose}
    >
        <TouchableWithoutFeedback
            onPress={
                this._closeModalByTap
            }>
            <View  style={styles.mask}>

                {this.state.isOpen===true?<LoadingForShow/>:null}
                {console.log('loading 1',this.state.loading)}
                <CachedImageBackground
                    ref={img => {
                        this.img = img;
                    }}
                    source={this.props.source}
                    style={[size, styles.img,]}
                    resizeMode={'contain'}
                    onLoad={() => this.setState({havePicture: true, loading: false,})}
                />

            </View>
        </TouchableWithoutFeedback>
    </Modal>

</View>

这里style自己根据需要自己设置

这个显示，写的比较冗余，不是很好，以后有机会会再次修改的。