React-Native項目中使用Gif圖做loading遮罩

React-Native項目中使用Gif圖做loading遮罩

先來張效果圖：

廢話不多說

源碼

功能還是在原來的項目中實現的，代碼可以單獨剝離，自己動手豐衣足食

文件路徑: 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</code></pre> 
  
備注說明：
 
  
 
   
 
代碼就這么多，如果有其他方面的需求，諸如添加文案，可以自己在此基礎上自定義，應該沒什么難度
 
 
   
 
圖片資源可以自己設置和修改
 
 
  
 
  
使用
 
  
在需要使用的地方 先引入組件
 
  
import LoadingView from '../common/LoadingView.js'
 
  
然后在 render() 中添加組件
 
  
render() {
    return (
        <View style={ styles.mainView }>


        ...

        <LoadingView showLoading={ this.state.showLoading } />
    </View>
)

}</code></pre> 
  
 
   
組件的 showLoading 屬性是必需的，顯示與隱藏是通過 showLoading 控制的
 
   
組件支持自定義背景不透明度 opacity ，默認0.6
 
   
組件支持自定義背景顏色 backgroundcolor ，默認 gray
 
   
組件支持gif圖點擊事件 loadingViewClick （可選）
 
  
 
  
Android需要特殊處理Gif加載
 
  
在 android/app/build.gradle 中需要添加以下內容
 
  
dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.非死book.fresco:animated-base-support:0.11.0'

// For animated GIF support
  compile 'com.非死book.fresco:animated-gif:0.11.0'
// For WebP support, including animated WebP
  compile 'com.非死book.fresco:animated-webp:0.11.0'
  compile 'com.非死book.fresco:webpsupport:0.11.0'
// For WebP support, without animations
  compile 'com.非死book.fresco:webpsupport:0.11.0'
}</code></pre> 
  
 
 
  
來自：http://www.jianshu.com/p/614bca02fc60