React-native自定义组件之loading加载（通过API方式调用）

React-native自定义组件之loading加载（通过API方式调用）

在请求接口数据中，需要等待时间，为了提高用户体验，加入一个正在加载的类似于模态框的提示
如上图所示可以再React Native 项目视图层上面创建一个视图层，来实现一些弹窗、加载组件，可以js调用。

1. 先创建上层组件，新建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',
    },
});

2. 在App.js中引入
   

3. 编写组件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",
    },
});

5. 在其他页面调用Loading组件
6. 通过js调用

Loading.show();//显示
Loading.hide();//隐藏