下文中的用法已經(jīng)過時(shí)，推薦react-native-overlayer

先來張效果圖：

廢話不多說
Show you the Code嘲碱！

源碼

功能還是在原來的項(xiàng)目中實(shí)現(xiàn)的诵原，代碼可以單獨(dú)剝離，自己動(dòng)手豐衣足食
源碼點(diǎn)擊這里

文件路徑: ListViewLoadMore/app/common/LoadingView.js

import React, { Component } from 'react';
import {
    View,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Modal
} from 'react-native';
const { width, height } = Dimensions.get('window')
import loadingImage from '../../assets/0.gif'
class LoadingView extends Component{
    constructor(props) {
        super(props);
    }
    _close(){
        console.log("onRequestClose ---- ")
    }
    render() {
        const { showLoading, opacity, backgroundColor } = this.props
        return (
            <Modal onRequestClose={() => this._close()} visible={showLoading} transparent>
                <View style={ [styles.loadingView, {opacity: opacity||0.3, backgroundColor: backgroundColor||'gray'}]}></View>
                <View style={ styles.loadingImageView }>
                    <View style={ styles.loadingImage }>
                        {
                            this.props.loadingViewClick?
                            <TouchableOpacity onPress={ this.props.loadingViewClick }>
                                <Image style={ styles.loadingImage } source={ loadingImage }/>
                            </TouchableOpacity>
                            :
                            <Image style={ styles.loadingImage } source={ loadingImage }/>
                        }
                    </View>
                </View>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    loadingView: {
        flex: 1,
        height,
        width,
        position: 'absolute'
    },
    loadingImage: {
        width: 150,
        height: 100,
    },
    loadingImageView: {
        position: 'absolute',
        width,
        height,
        justifyContent: 'center',
        alignItems: 'center'
    }
})
LoadingView.propTypes = {
    loadingViewClick: React.PropTypes.func, //.isRequired,
    showLoading: React.PropTypes.bool.isRequired,
    opacity: React.PropTypes.number,
    backgroundColor: React.PropTypes.string
}


export default LoadingView

備注說明：

• 代碼就這么多也拜，如果有其他方面的需求赃阀，諸如添加文案霎肯，可以自己在此基礎(chǔ)上自定義，應(yīng)該沒什么難度
• 圖片資源可以自己設(shè)置和修改

使用

在需要使用的地方 先引入組件

import LoadingView from '../common/LoadingView.js'

然后在render()中添加組件

render() {
    return (
        <View style={ styles.mainView }>
            
            ...
            
            <LoadingView showLoading={ this.state.showLoading } />
        </View>
    )
}

• 組件的showLoading屬性是必需的榛斯，顯示與隱藏是通過showLoading控制的
• 組件支持自定義背景不透明度 opacity观游，默認(rèn)0.6
• 組件支持自定義背景顏色 backgroundcolor，默認(rèn)gray
• 組件支持gif圖點(diǎn)擊事件loadingViewClick（可選）

Android需要特殊處理Gif加載

在android/app/build.gradle中需要添加以下內(nèi)容

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:0.11.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:0.11.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:0.11.0'
  compile 'com.facebook.fresco:webpsupport:0.11.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:0.11.0'
}

Over

先這樣驮俗，有問題留言