首页 热点专区 小学知识 中学知识 出国留学 考研考公
您的当前位置:首页正文

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

2024-12-06 来源:要发发知识网

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项目下的一些原生配置。

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

显示全文