React-native自定义组件之loading加载(通过API方式调用)
在请求接口数据中,需要等待时间,为了提高用户体验,加入一个正在加载的类似于模态框的提示
如上图所示可以再React Native 项目视图层上面创建一个视图层,来实现一些弹窗、加载组件,可以js调用。
- 先创建上层组件,新建js文件
import React, { Component } from "react";
import { StyleSheet, AppRegistry, View, Text } from 'react-native';
import Toast from './Toast';
import Loading from './Loading.js';
const originRegister = AppRegistry.registerComponent;
AppRegistry.registerComponent = (appKey, component) => {
return originRegister(appKey, function () {
const OriginAppComponent = component();
return class extends Component {
render() {
return (
<View style={styles.container}>
<OriginAppComponent />
{/* 提示 */}
<Toast />
{/* //加载动画 */}
<Loading></Loading>
</View>
);
};
};
});
};
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'relative',
},
});
-
在App.js中引入
-
编写组件Loading
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ActivityIndicator,
Dimensions
} from 'react-native';
const { width, height } = Dimensions.get('window')
let _this = null;
export default class Loading extends Component {
constructor(props) {
super(props);
_this = this;
this.state = {
show:false
};
}
static show = () => {
_this.setState({show: true})
};
static hide = () => {
_this.setState({show: false})
};
render() {
if (this.state.show) {
return (
<View style={styles.LoadingPage}>
<View style={{
width: 100,
height: 100,
backgroundColor: "rgba(0,0,0,0.6)",
opacity: 1,
justifyContent: "center",
alignItems: "center",
borderRadius:7
}}>
<ActivityIndicator size="large" color="#FFF" />
<Text style={{ marginLeft: 10,color:"#FFF",marginTop:10 }}>正在加载...</Text>
</View>
</View>
);
} else {
return <View />
}
}
}
const styles = StyleSheet.create({
LoadingPage: {
position: "absolute",
left: 0,
top: 0,
backgroundColor: "rgba(0,0,0,0)",
width: width,
height: height,
justifyContent: "center",
alignItems: "center",
},
});
- 在其他页面调用Loading组件
- 通过js调用
Loading.show();//显示
Loading.hide();//隐藏