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

系统: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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容