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|无

效果

!image

用法

`
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 (

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)}
/>

);
}
}

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


``