react-native 轮播组件 looped-carousel使用介绍

Z时代
2024-01-10
分类：综合

react

一关于轮播类组件，网上其实已经有挺多了，本人曾经用过 swiper，viewpager，以及facebook出品的viewpagerAndroid。

swiper因在安卓上有问题，而且在组件嵌套使用时问题较多，所以弃用。

后来尝试viewpager，因为轮播时，下面的圆点显示有误，所以弃用。

而ViewpagerAndroid因为只支持安卓系统，所以很少用到，在ios必须另找组件。

最近发现了新的组件 react-native-looped-carousel ，看着还不错，于是介绍一下使用方法。

二 looped-carousel使用介绍

安装

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

属性

Name	propType	default value	description
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}>
        <Carousel
          delay={2000}
          style={this.state.size}
          autoplay
          pageInfo
          onAnimateNextPage={(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>