0.0.4 • Published 7 years ago
react-native-carousel-slider v0.0.4
介绍
使用react native scrollList封装，轮播图
安装
npm install react-native-carousel-sliderAPI
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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);