React Native技术篇—自定义Loading加载动画

注意：未经允许不可私自转载，违者必究

React Native官方文档：https://reactnative.cn/docs/getting-started/

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git

在写自定义Loading加载动画之前我们要先创建一个React Native第二视图层。

创建教程：https://blog.csdn.net/weixin_40614372/article/details/86506678

自定义Loading加载动画代码

在项目src/components/common目录下创建 Loading.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, ActivityIndicator, Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window')
_this = null;
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 />
        }
    }
}
export default Loading;
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",
    },
});

使用方法

import Loading from "./../components/common/Loading";

//打开加载动画
Loading.show();

//关闭请求动画
Loading.hide();

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git

注意：未经允许不可私自转载，违者必究