系統(tǒng):MacOS
react-native版本:0.49
1、首先,打開終端拢蛋,進(jìn)入到項(xiàng)目的子目錄,假如我的項(xiàng)目為testreact蔫巩,例:cd zhangsan/workidea/testreact
2谆棱、終端下輸入npm install react-native-spinkit@latest --save ,這樣第三方庫(kù)就導(dǎo)入進(jìn)項(xiàng)目了
3圆仔、在項(xiàng)目要使用的界面使用先導(dǎo)入該控件垃瞧,varSpinner=require('react-native-spinkit');
如下圖:
4、然后在view標(biāo)簽里面引入控件就行了坪郭,例如:
<Spinner style={styles.spinner}?isVisible={this.state.hidden}size={100}type={"ThreeBounce"}color={'#3B77FF'}/>
其中isVisible里面是個(gè)false或者ture个从,來控制動(dòng)畫的顯示或者隱藏,size是大小歪沃,type是動(dòng)畫樣式嗦锐,目前支持的樣式有:
CircleFlip
Bounce
Wave
WanderingCubes
Pulse
ChasingDots
ThreeBounce
Circle
9CubeGrid
WordPress (IOS only)
FadingCircle
FadingCircleAlt
Arc (IOS only)
ArcAlt (IOS only)
根據(jù)自己的需求,選擇自己需要的樣式就可以了沪曙,寫到這的時(shí)候奕污,我以為已經(jīng)沒問題了,運(yùn)行項(xiàng)目液走,發(fā)現(xiàn)沒有動(dòng)畫出現(xiàn)碳默,屏幕只有個(gè)紅色的框框,原來缘眶,如果要使用該動(dòng)畫庫(kù)嘱根,需要在修改react-native項(xiàng)目下的一些原生配置。
android加入該動(dòng)畫照著下面鏈接配置就行了:github.com/maxs15/react-native-spinkit/wiki/Manual-linking---Android
ios加入該動(dòng)畫則照著下列鏈接配置:https://github.com/maxs15/react-native-spinkit/wiki/Manual-linking---IOS
然后運(yùn)行項(xiàng)目巷懈,就可以看到自己想要的動(dòng)畫效果了该抒。