React-Native之輪播組件looped-carousel的介紹與使用

一,關(guān)于react-native輪播組件的介紹與對(duì)比

? ?1,react-native-swiper在動(dòng)態(tài)使用網(wǎng)頁(yè)圖片，多張圖片時(shí)iOS上總是只顯示第一張，Android正常顯示，支持加載json數(shù)組數(shù)據(jù)。

? ?2,react-native-viewpager，因?yàn)檩啿r(shí)，下面的圓點(diǎn)有時(shí)顯示會(huì)有誤，加載上百頁(yè)數(shù)據(jù)并且表現(xiàn)性能良好。在Android平臺(tái)上面除此特性以外,ViewPager還支持自動(dòng)循環(huán)無(wú)限輪播功能,類(lèi)似與listview,需構(gòu)建DataSource對(duì)象。

? ?3,新的組件 ?react-native-looped-carousel?,整體看起來(lái)還不錯(cuò)（支持iOS Android），但是不支持加載json數(shù)組數(shù)據(jù)，只支持限制數(shù)組數(shù)據(jù)，而且在動(dòng)態(tài)從數(shù)據(jù)庫(kù)獲取的數(shù)據(jù)時(shí)，如果數(shù)據(jù)還沒(méi)獲取完就渲染react-native-looped-carousel組件會(huì)報(bào)錯(cuò):

二,react-native-looped-carousel的介紹

? ?1,安裝:?

? ? ? npm install react-native-looped-carousel --save

? ?2,屬性

NamepropTypedefault valuedescription

autoplay	boolean	true	是否自動(dòng)輪播
delay	number	4000	多少毫秒切換一次
currentPage	number	0	設(shè)置初始頁(yè)
pageStyle	style	null	頁(yè)面的樣式
contentContainerStyle	style	null	contentContainerStyle?for the scrollView
onAnimateNextPage	func	null	切換輪播圖時(shí)的回調(diào)方法
swipe	bool	true	是否允許手勢(shì)滑動(dòng)也換頁(yè)面
分頁(yè)	---	---	---
pageInfo	boolean	false	是否在底部顯示當(dāng)前頁(yè)面下標(biāo) / 頁(yè)面?zhèn)€數(shù)
pageInfoBackgroundColor	string	'rgba(0, 0, 0, 0.25)'	分頁(yè)的背景色
pageInfoBottomContainerStyle	style	null	pageInfo容器的樣式
pageInfoTextStyle	style	null	pageInfo中的文本樣式
pageInfoTextSeparator	string	' / '	在?當(dāng)前頁(yè)面下標(biāo)?和?頁(yè)面?zhèn)€數(shù)之間的分隔符
小圓點(diǎn)	---	---	---
bullets	bool	false	是否在輪播的底部顯示小圓點(diǎn)
bulletStyle	style	null	bullet（小圓點(diǎn)）的樣式
bulletsContainerStyle	style	null	style for the bullets container
chosenBulletStyle	stlye	null	bullet的容器的樣式
導(dǎo)航箭頭	---	---	---
arrows	bool	false	是否顯示輪播的導(dǎo)航箭頭
arrowsStyle	style	null	導(dǎo)航箭頭的樣式
arrowsContainerStyle	style	null	導(dǎo)航箭頭的容器樣式
leftArrowText	string / element	'Left'	左箭頭的文字或圖片
rightArrowText	string / element	'Right'	label / icon for right navigation arrow

?

三,react-native-looped-carousel的使用實(shí)例

1,官網(wǎng)使用實(shí)例：

1 import React, { Component } from 'react';2 import {3 Text,4 View,5 Dimensions,6 } from 'react-native';7 import Carousel from 'react-native-looped-carousel';8 9 const { width, height } = Dimensions.get('window'); 10 11 export default class CarouselExample extends Component { 12 13 constructor(props) { 14 super(props); 15 16 this.state = { 17 size: { width, height }, 18 }; 19 } 20 21 _onLayoutDidChange = (e) => { 22 const layout = e.nativeEvent.layout; 23 this.setState({ size: { width: layout.width, height: layout.height } }); 24 } 25 26 render() { 27 return ( 28 <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}> 29 <Carousel 30 delay={2000} 31 style={this.state.size} 32 autoplay 33 pageInfo 34 onAnimateNextPage={(p) => console.log(p)} 35 > 36 <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View> 37 <View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View> 38 <View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View> 39 </Carousel> 40 </View> 41 ); 42 } 43 }

2,我的使用實(shí)例：

1 <Carousel2 delay={4000} //自動(dòng)切換的延遲 （毫秒）3 style={{ height: Boxheight, width: AppSetting.ScreenWidth, backgroundColor: AppSetting.BLACK }} //樣式4 autoplay //自動(dòng)輪播5 pageInfo={false} //在底部顯示當(dāng)前頁(yè)面下標(biāo) / 頁(yè)面?zhèn)€數(shù)6 swiper //允許手勢(shì)滑動(dòng)7 bullets={true} //顯示小圓點(diǎn)8 bulletStyle={{ //未選中的圓點(diǎn)樣式9 backgroundColor: 'rgba(255,255,255,0.4)', 10 width: 12, 11 height: 12, 12 borderRadius: 50, 13 borderColor:'rgba(255,255,255,0.4)', 14 // marginLeft: 10, 15 // marginRight: 9, 16 // marginTop: 6, 17 // marginBottom: 9, 18 margin:6 19 }} //未選中時(shí)小圓點(diǎn)的樣式 20 chosenBulletStyle={{ //選中的圓點(diǎn)樣式 21 backgroundColor: AppSetting.MAIN_COLOR, 22 width: 16, 23 height: 16, 24 borderRadius: 50, 25 // marginLeft: 10, 26 // marginRight: 9, 27 // marginTop: 9, 28 // marginBottom: 9, 29 margin:6 30 }}//選中時(shí)小圓點(diǎn)的樣式 31 > 32 {React.Children.map(self.state.dataImageSource, (child, index) => { 33 return ( 34 <View> 35 <TouchableOpacity 36 // key={index} 37 style={styles.img} 38 activeOpacity={1} 39 //onPress={() => { Actions.AnnouncementDetails({ model: child }) }} 40 onPress={() => { this.openAnnouncementData(child) }} 41 > 42 <Image 43 source={{ uri: child }} 44 style={styles.img} 45 resizeMode='stretch' /> 46 </TouchableOpacity> 47 </View> 48 ) 49 })} 50 51 </Carousel>

1 self.setState({2 announcementData: [3 {4 id: 1,5 title: 'React Native之TextInput的介紹與使用(富文本封裝與使用實(shí)例,常用輸入框封裝與使用實(shí)例)',6 imageurl: 'http://www.baidu.com/images/banner1.png',7 url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9524842.html'8 },9 { 10 id: 3, 11 title: 'React Native之FlatList的介紹與使用實(shí)例', 12 imageurl: 'http://www.baidu.com/images/banner2.png', 13 url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9523927.html' 14 }, 15 { 16 id: 4, 17 title: '將數(shù)字轉(zhuǎn)換成千分位表示', 18 imageurl: 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg', 19 url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9454362.html' 20 }, 21 22 ], 23 dataImageSource: [ 24 'http://www.baidu.com/images/banner1.png', 25 'http://www.baidu.com/baidufiles/banner/images/2018/08/07/QQ%E5%9B%BE%E7%89%8720180807164315.jpg', 26 'http://www.baidu.com/images/banner2.png', 27 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg', 28 ], 29 isStartRendering:true 30 })

當(dāng)數(shù)據(jù)加載完成后，再渲染界面：

1 {this.state.isStartRendering?this.SowingMap():null}

總結(jié)

以上是生活随笔為你收集整理的React-Native之轮播组件汇总 以及looped-carousel的介绍与使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。