我们经常需要执行耗时较长的代码。为了良好的用户体验,我们在异步处理耗时代码时,采用Loading加载动画的形式来等待处理。
这里参考了《React native Model组件的使用》。
1.在components下新建loading.js文件,如下
/**
* 调用说明:
* <Loading ref={r=>{this.Loading = r}} hide = {true} /> //放在布局的最后即可
* 在需要显示的地方调用this.Loading.show();
* 在需要隐藏的地方调用this.Loading.close();
*/
import React, { Component } from 'react';
import {
Platform,
View,
ActivityIndicator,
Modal,
} from 'react-native';
import PropTypes from 'prop-types';
export default class Loading extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: !this.props.hide,
}
}
close() {
if (Platform.OS === 'android') {
setTimeout(()=>{
this.setState({modalVisible: false});
},1000)
}else {
this.setState({modalVisible: false});
}
}
show() {
this.setState({modalVisible: true});
}
render() {
if (!this.state.modalVisible) {
return null
}
return (
<Modal
animationType={"none"}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {}}
>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{borderRadius: 10, backgroundColor: 'rgba(0,0,0,0.5)', width: 100, height: 100, alignItems: 'center'}}>
<ActivityIndicator
animating={true}
color='white'
style={{
marginTop: 20,
width: 60,
height: 60,
}}
size="large" />
</View>
</View>
</Modal>
);
}
}
Loading.PropTypes = {
hide: PropTypes.bool.isRequired,
};
2.在App.js中引入loading.js
import Loading from './components/loading';
在最外层的View中底部渲染Loading
<View style={[{flex: 1}]}>
{/*<Router sceneStyle={[styles.router]}>
{/*......*/}
{/*</Router>*/}
{/*<PlayButton />*/}
<Loading ref={r=>{this.Loading = r}} hide = {true} />
</View>
定义全局的方法
let self; //将App组件中的this赋给全局的self
global.showLoading = false; //所有子页面均可直接调用global.showLoading()来展示Loading
global.closeLoading = false; //所有子页面均可直接调用global.closeLoading()来关闭Loading
给全局方法赋值,使其可以在任何页面调用
componentDidMount() {
self = this;
global.showLoading = function() {
self.Loading.show();
};
global.closeLoading = function() {
self.Loading.close();
};
}
调用Loading
_showLoading() {
global.showLoading();
setTimeout(()=>{
global.closeLoading();
},500)
}
this._showLoading();