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

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

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

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

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

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

二 looped-carousel使用介绍

安装

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

属性

使用

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>

如图所示：

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