JSPM – react-native-carousel-slider@0.0.2

Package Exports

react-native-carousel-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-carousel-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

介绍

使用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);
  }

  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" }}
        />
      </View>
    );
  }
}


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