react-native 加载动画 loading效果-蒲公英云

react-native 加载动画 loading效果

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

- 1. 组件代码(demo.js)
- 1. 调用
- 1. FAQ

在这里插入图片描述

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 />