【React-native】react-native-spinkit Loading动画加载组件的使用

版权声明：请通知博主（[email protected]）获取允许后进行分享。 https://blog.csdn.net/qq934235475/article/details/87878798

近来想研究新的动画加载组件，找到了一个react-native-spinkit ，感觉使用起来很不错，记录一下使用的过程。

效果展示： 

其他动画效果：

那么，让我们提起裤子开干吧！ 

---

环境版本：

  "react": "^16.2.0",
  "react-native": "^0.53.0",
  "react-native-spinkit": "^1.1.1",

---

总体步骤：

1. 导入组件。
2. iOS 与 Android 原生进行配置。
3. 开始使用。

---

一，导入组件

npm install react-native-spinkit --save

---

二，原生配置

Android：https://github.com/maxs15/react-native-spinkit/wiki/Manual-linking

iOS：https://github.com/maxs15/react-native-spinkit/wiki/Manual-linking

参考如上教程即可，有不懂可以提问。

---

三，使用

我这里考虑到复用性，封装成了一个组件，通过前一页面传入大小，颜色与动画类型，来进行展示，代码如下：

import Spinkiter from 'react-native-spinkit';
import {Modal,View} from 'react-native';
import React, {Component} from 'react';
/**
 *
 * List of available spinkerType
 * CircleFlip
 * Bounce
 * Wave
 * WanderingCubes
 * Pulse
 * ChasingDots
 * ThreeBounce
 * Circle
 * 9CubeGrid
 * WordPress (IOS only)
 * FadingCircle
 * FadingCircleAlt
 * Arc (IOS only)
 * ArcAlt (IOS only)

 */
export default class Spinner extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Modal
               visible={this.props.showSpinner}
               transparent={true}>
                <View
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'rgba(0, 0, 0, 0.6)'
                    }}>
                    <Spinkiter isVisible={this.props.showSpinner} size={this.props.spinkerSize} type={this.props.spinkerType} color={this.props.spinkerColor}/>
                </View>
            </Modal>
        );
    }
}

项目示例：https://github.com/supervons/commonProject

欢迎关注，star!