react-native-carousel-slider

介绍

使用react native scrollList封装，轮播图

安装

npm install react-native-carousel-slider

API

属性	说明	类型	默认值
dataSource	数据源	Array	[]
height	轮播图高度	number	150
initialSlide	手动设置当前显示的索引	number	0
autoplay	是否自动切换	Boolean	true
autoplaySpeed	切换时间	number	3000 ms
dots	是否显示面板指示点	Boolean	true
dotsClass	指示点样式	Object	无
dotSelectedClass	当前激活的指示点样式	Object	无
beforeChange	切换面板前的回调函数	(from: number, to: number): void	无
afterChange	切换面板后的回调函数	(current: number): void	无
onPress	点击面板的回调函数	(event: object,index:number): void	无

效果

用法

import { AppRegistry, View } from "react-native";
import React, { Component } from "react";
import Carousel from "react-native-carousel-slider";

const imgs = [
  "https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png",
  "https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png",
  "https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png"
];

export default class Index extends Component {
  beforeChange(from, to) {
    console.log("beforeChange--->", from, to);
  }

  afterChange(current) {
    console.log("afterChange--->", current);
  }

  onPress(event, index) {
    console.log(event, index);
  }

  render() {
    return (
      <View>
        <Carousel
          dataSource={imgs}
          autoPlay={false}
          initialSlide={0}
          dots={true}
          beforeChange={(from, to) => this.beforeChange(from, to)}
          afterChange={current => this.afterChange(current)}
          dotsClass={{ backgroundColor: "blue" }}
          dotActiveStyle={{ backgroundColor: "red" }}
          onPress={(event, index) => this.onPress(event, index)}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent("Test", () => Index);