一 關于輪播類組件，網上其實已經有挺多了，本人曾經用過 swiper，viewpager，以及facebook出品的viewpagerAndroid。

swiper因在安卓上有問題，而且在組件嵌套使用時問題較多，所以棄用。

后來嘗試viewpager，因為輪播時，下面的圓點顯示有誤，所以棄用。

而ViewpagerAndroid因為只支持安卓系統，所以很少用到，在ios必須另找組件。

最近發現了新的組件 ?react-native-looped-carousel?，看著還不錯，于是介紹一下使用方法。

二 looped-carousel使用介紹

安裝

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

屬性

NamepropTypedefault valuedescription

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

使用

import React, { Component } from 'react'; import {Text,View,Dimensions, } from 'react-native'; import Carousel from 'react-native-looped-carousel';const { width, height } = Dimensions.get('window');export default class CarouselExample extends Component {constructor(props) {super(props);this.state = {size: { width, height },};}_onLayoutDidChange = (e) => {const layout = e.nativeEvent.layout;this.setState({ size: { width: layout.width, height: layout.height } });}render() {return (<View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}><Carouseldelay={2000}style={this.state.size}autoplaypageInfoonAnimateNextPage={(p) => console.log(p)}><View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View><View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View><View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View></Carousel></View>);} }

以上是作者的使用事例，比較簡單，下面我結合 它公開的屬性來慢慢展開：

1.顯示下面的分頁個數的

<Carousel delay={2000} //自動切換的延遲 （毫秒） style={{width:375,height:200}} //輪播組件的樣式 autoplay //自動輪播 pageInfo //在底部顯示當前頁面下標 / 頁面個數 swiper //允許手勢滑動 pageInfoBackgroundColor={'#fff'} //分頁標示的背景色 onAnimateNextPage={(p) => console.log(p)} //切換頁面時的回調 pageInfoTextStyle={{color:'blue'}} //下面字體樣式 pageInfoTextSeparator={'!!!'} //中間的分隔符 > {React.Children.map(['aa','bb','cc'],(child,index)=>{return(<View style={styles.container}> <Text>{child+','+index}</Text> </View> )})} </Carousel>

看一下圖，該項目是我平時寫demo的，所以凌亂的動畫請無視。。

2. 顯示小圓點的

<Carousel delay={2000} //自動切換的延遲 （毫秒） style={{width: 375, height: 200}} //輪播組件的樣式 autoplay //自動輪播 pageInfo={false} //在底部顯示當前頁面下標 / 頁面個數 swiper //允許手勢滑動 bullets={true} //顯示小圓點 bulletStyle={{backgroundColor: '#fff', width: 5, height: 5}} //未選中時小圓點的樣式 chosenBulletStyle={{backgroundColor: 'red', width: 5, height: 5}}//選中時小圓點的樣式 arrows={true} //顯示導航箭頭 leftArrowText="left?" //左導航 arrowsContainerStyle={{paddingHorizontal:20}} //箭頭容器樣式 rightArrowText={<Animated.Image //右導航 style={{transform: [{rotate: spin}], height:20, width:20 }}source={require('./img/a.jpg')}/>} > {React.Children.map(['aa', 'bb', 'cc'], (child, index) => {return (<View style={styles.container}> <Text>{child + ',' + index}</Text> </View> )})} </Carousel>

如圖所示：

目前看上去還是很方便的，有需要的可以看一下啊~

總結

以上是生活随笔為你收集整理的react-native 轮播组件 looped-carousel使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。