在请求接口数据中，需要等待时间，为了提高用户体验，加入一个正在加载的类似于模态框的提示 如上图所示可以再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();//隐藏