react-native 加载动画 loading效果

朴灿烈づ我的快乐病毒、 2022-08-29 15:53 460阅读 0赞

### react-native loading动画（加载动画） ###

*   *  1. 组件代码(demo.js)
     *  2. 调用
     *  3. FAQ

![在这里插入图片描述][20210717121526838.png]

## 1. 组件代码(demo.js) ##

import Taro, { PureComponent } from '@tarojs/taro'
    import {
        StyleSheet,
        View,
        Text,
        ActivityIndicator,
    } from 'react-native';
    export default class ActivityIndicatorDemo extends PureComponent {
        render() {
            const { loadingStatus = true, loadingColor = '#6495ED' } = this.props;
            const styles = StyleSheet.create({
                container: {
                    flex: 1,
                    justifyContent: "center"
                },
                horizontal: {
                    flexDirection: "row",
                    justifyContent: "space-around",
                    padding: 10
                }
            });
            return (
                <View style={[styles.container, styles.horizontal]}>
                    <ActivityIndicator size="large" color={loadingColor} animating={loadingStatus} />
                </View>
            );
        }
    }

*  目前两个值为动态传入:
 *  loadingColor => 动画颜色
 *  animating => 动画关闭或开启
 *  size也可灵活配置，由外部传入

## 2. 调用 ##

// 引入此组件
    import ActivityIndicatorDemo from './demo.js'
    // state里的值
    this.state = {
    	red: red,
    	animating: true
    }
    // 调用
    <ActivityIndicatorDemo
    loadingColor  = {red}
    animating = {animating}
    ><ActivityIndicatorDemo />

## 3. FAQ ##

*  注意reactNative的版本（0.5以下不支持 ActivityIndicator）
 *  注意传值

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

![在这里插入图片描述][20210710213359459.png]

[20210717121526838.png]: /images/20220829/044ac8bf17a749c89384a28f0a00a87c.png
[20210710213359459.png]: /images/20220829/ba770939ff434c099ad45c2d92b70996.png