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

近来想研究新的动画加载组件，找到了一个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

注：0.60 以上版本自动 linking （iOS 如果提示找不到，请 cd iOS && pod install）

---

二，原生配置

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 (
            
                
                    
                
            
        );
    }
}

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

欢迎关注，star!