先来张效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/a1b1af36907e5182d4528f3fd4f32e34.webp?x-image-process=image/format,png)
废话不多说
Show you the Code!
源码
功能还是在原来的项目中实现的,代码可以单独剥离,自己动手丰衣足食
源码点击这里
文件路径: 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
备注说明:
- 代码就这么多,如果有其他方面的需求,诸如添加文案,可以自己在此基础上自定义,应该没什么难度
- 图片资源可以自己设置和修改
使用
在需要使用的地方 先引入组件
import LoadingView from '../common/LoadingView.js'
然后在render()
中添加组件
render() {
return (
<View style={ styles.mainView }>
...
<LoadingView showLoading={ this.state.showLoading } />
</View>
)
}
- 组件的
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.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
先这样,有问题留言