系统: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.hidden}size={100}type={"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
然后运行项目,就可以看到自己想要的动画效果了。