react-native 加载动画 loading效果

简介: 笔记

1.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)
  • 注意传值
目录
相关文章
|
6月前
|
前端开发 Java API
【第49期】一文了解React动画
【第49期】一文了解React动画
165 0
|
5月前
|
JSON 弹性计算 前端开发
函数计算产品使用问题之遇到在自定义运行时部署React项目时遇到样式无法正常加载。一般是什么导致的
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
前端开发 JavaScript Java
react中实现组件之间的转场动画
react中实现组件之间的转场动画
244 0
|
6月前
|
前端开发
react函数组件购物车小球动画实现
react函数组件购物车小球动画实现
84 0
react函数组件购物车小球动画实现
|
6月前
|
前端开发
使用react实现一个简易的小球动画
使用react实现一个简易的小球动画
63 0
|
6月前
|
前端开发
React 购物车小球动画
React 购物车小球动画
|
6月前
|
前端开发 JavaScript
React中组件间过渡动画如何实现?
React中组件间过渡动画如何实现?
78 0
|
前端开发
React-组件-原生动画 和 React-组件-性能优化
React-组件-原生动画 和 React-组件-性能优化
61 0
|
前端开发 JavaScript UED
React | React的过渡动画
React | React的过渡动画
|
前端开发
react路由动画?
react路由动画?