react-native 实现全局loading 调用
在调用网络接口或者做一些耗时操作的时候，会展示一个loading动画，使用户等待处理完后在进行其他操作，这个loading动画，如果每个页面都写，会写很多重复代码，不建议这么做。
为了实现全局唯一loading动画，可以使用
方式一
react-native-root-siblings https://github.com/magicismight/react-native-root-siblings；
推荐使用方式二
方式二
在应用组件的最外层setup.js添加一个自定义的MyLoading组件代码如下：
import React, { Component } from "react";
import App from "./App";
import MyLoading from "./component/MyLoading";
import { View } from "react-native";
export default class setup extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View
style={{
flex : 1,
}}
>
<App/>
{<MyLoading
ref={(ref) => {
global.mLoadingComponentRef = ref;
}}
/>}
</View>
);
}
}
MyLoading.js:
import React from "react";
import { ActivityIndicator, StyleSheet, Text, View,Dimensions } from "react-native";
let width = Dimensions.get('window').width,
let height = Dimensions.get('window').height,
export default class MyLoading extends React.Component {
constructor(props) {
super(props);
this.minShowingTime = 200;
this.state = {
isLoading : false,
setIsLoading : (isLoading) => {
if (isLoading != this.state.isLoading) {
let curTimeLong = new Date().getTime();
if (isLoading) {
this.startTime = curTimeLong;
this.setState({
isLoading
});
} else {
let hasShowingTimeLong = curTimeLong - this.startTime;
if (hasShowingTimeLong < this.minShowingTime) {
setTimeout(() => {
this.setState({
isLoading
});
}, this.minShowingTime - hasShowingTimeLong);
} else {
this.setState({
isLoading
});
}
}
}
},
};
}
showLoading = () => {
this.state.setIsLoading(true);
};
dismissLoading = () => {
this.state.setIsLoading(false);
};
render() {
if (!this.state.isLoading) {
return null;
}
return (
<View style={{
flex : 1,
width : width,
height : height,
position : 'absolute',
// backgroundColor:'red',
backgroundColor : '#10101099',
}}>
<View style={styles.loading}>
<ActivityIndicator color="white"/>
<Text style={styles.loadingTitle}>请稍后...</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
loading : {
backgroundColor : '#10101099',
height : 80,
width : 100,
borderRadius : 10,
justifyContent : 'center',
alignItems : 'center',
position : 'absolute',
top : (height - 80) / 2,
left : (width - 100) / 2,
},
loadingTitle : {
marginTop : 10,
fontSize : 14,
color : 'white'
}
});
添加LoadingUtil.js工具类：
/**
* 全局唯一的Loading显示隐藏工具类。
* use:
导入：import LoadingUtil from "./LoadingUtil";
显示：LoadingUtil.showLoading();
隐藏：LoadingUtil.dismissLoading();
*/
let LoadingUtil = {
showLoading(timeOut = 10000){
global.mLoadingComponentRef && global.mLoadingComponentRef.showLoading();
this.timerLoading = setTimeout(() => {
this.dismissLoading();
}, timeOut);
},
dismissLoading(){
global.mLoadingComponentRef && global.mLoadingComponentRef.dismissLoading();
this.timerLoading && clearTimeout(this.timerLoading);
},
};
export default LoadingUtil;
使用：
import LoadingUtil from "./LoadingUtil";
在需要显示loading动画的地方调用：
LoadingUtil.showLoading();
在需要隐藏loading动画的地方调用：
LoadingUtil.dismissLoading();
