react-native-spinkit的简单使用心得

Posted 2023-03-15

参考技术A 系统： MacOS

react-native版本:0.49

1、首先，打开终端，进入到项目的子目录，假如我的项目为testreact，例：cd zhangsan/workidea/testreact

2、终端下输入npm install react-native-spinkit@latest --save ，这样第三方库就导入进项目了

3、在项目要使用的界面使用先导入该控件，varSpinner=require('react-native-spinkit');

如下图：

4、然后在view标签里面引入控件就行了，例如：

<Spinner style=styles.spinner isVisible=this.state.hiddensize=100type="ThreeBounce"color='#3B77FF'/>

其中isVisible里面是个false或者ture，来控制动画的显示或者隐藏，size是大小，type是动画样式，目前支持的样式有：

CircleFlip

Bounce

Wave

WanderingCubes

Pulse

ChasingDots

ThreeBounce

Circle

9CubeGrid

WordPress (ios only)

FadingCircle

FadingCircleAlt

Arc (IOS only)

ArcAlt (IOS only)

根据自己的需求，选择自己需要的样式就可以了，写到这的时候，我以为已经没问题了，运行项目，发现没有动画出现，屏幕只有个红色的框框，原来，如果要使用该动画库，需要在修改react-native项目下的一些原生配置。

android加入该动画照着下面链接配置就行了: github.com/maxs15/react-native-spinkit/wiki/Manual-linking---Android

ios加入该动画则照着下列链接配置：https://github.com/maxs15/react-native-spinkit/wiki/Manual-linking---IOS

然后运行项目，就可以看到自己想要的动画效果了。