react-native 加载动画 loading效果

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native 加载动画 loading效果相关的知识,希望对你有一定的参考价值。

react-native loading动画(加载动画)


在这里插入图片描述

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. 如果存在疑问,可以私信我

在这里插入图片描述

以上是关于react-native 加载动画 loading效果的主要内容,如果未能解决你的问题,请参考以下文章

Android操作系统中默认的loading动画怎么调用

iOS~自带loading动画的登陆按钮

WPF动画 - Loading加载动画

在页面未加载完之前显示loading动画

在页面未加载完之前显示loading动画

纯CSS3方块翻转效果的Loading加载动画