react-native 加载动画 loading效果

Posted 2021-08-21 欧阳呀

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

• • 1. 组件代码(demo.js)
  • 2. 调用
  • 3. 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 />

3. FAQ

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

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我