React-Native项目中使用Gif图做loading遮罩

   <h2>React-Native项目中使用Gif图做loading遮罩</h2>    <p>先来张效果图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/43896dc2ac4c6715360b8212f7d2baa8.gif"></p>    <p>废话不多说</p>    <h2><strong>源码</strong></h2>    <p>功能还是在原来的项目中实现的，代码可以单独剥离，自己动手丰衣足食</p>    <p>文件路径: ListViewLoadMore/app/common/LoadingView.js</p>    <pre>  <code class="language-javascript">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>    <p>备注说明：</p>    <ul>     <li> <p>代码就这么多，如果有其他方面的需求，诸如添加文案，可以自己在此基础上自定义，应该没什么难度</p> </li>     <li> <p>图片资源可以自己设置和修改</p> </li>    </ul>    <h2><strong>使用</strong></h2>    <p>在需要使用的地方 先引入组件</p>    <pre>  <code class="language-javascript">import LoadingView from '../common/LoadingView.js'</code></pre>    <p>然后在 render() 中添加组件</p>    <pre>  <code class="language-javascript">render() {      return (          <View style={ styles.mainView }>                ...                <LoadingView showLoading={ this.state.showLoading } />          </View>      )  }</code></pre>    <ul>     <li>组件的 showLoading 属性是必需的，显示与隐藏是通过 showLoading 控制的</li>     <li>组件支持自定义背景不透明度 opacity ，默认0.6</li>     <li>组件支持自定义背景颜色 backgroundcolor ，默认 gray</li>     <li>组件支持gif图点击事件 loadingViewClick （可选）</li>    </ul>    <h3><strong>Android需要特殊处理Gif加载</strong></h3>    <p>在 android/app/build.gradle 中需要添加以下内容</p>    <pre>  <code class="language-javascript">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>    <p> </p>    <p>来自：http://www.jianshu.com/p/614bca02fc60</p>    <p> </p>