0.0.3 • Published 4 years ago
React Native 轮播组件使用介绍
安装：
npm install native-cmos-carousel
参数：
| Name | propType | default value | description |
|---|
| autoplay | bool | true | 自动播放 |
| delay | number | 4000 | 延时 |
| currentPage | number | 0 | 初始化当前页位置 |
| bullets | bool | false | 是否显示页面小圆点 |
| bulletStyle | style | null | 小圆点样式 |
| bulletsContainerStyle | style | null | 小圆点容器样式 |
| chosenBulletStyle | style | null | 选中小圆点的样式 |
| height | number | null | 轮播图高度设置，默认为屏幕高度 |
| width | number | null | 轮播图宽度设置，默认为屏幕宽度 |
使用示例：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
Image,
} from 'react-native';
import Carousel from 'native-cmos-carousel';
const { width, height } = Dimensions.get('window');
export default class carouselTest extends Component {
constructor(props) {
super(props);
this.state = {
size: { width, height },
};
}
render() {
return (
<View style={{ flex: 1 ,backgroundColor:'white'}}>
<Carousel
height={height/3}
delay={2000}
autoplay
bullets
bulletStyle={{backgroundColor:'white'}}
>
<Image
style={{width:width,height:height/3}}
source={{uri: 'http://www.10086.cn/cmpop/images/index/ad1/201609/20160914171036633bj1.jpg'}}
/>
<Image
style={{width:width,height:height/3}}
source={{uri: 'http://www.10086.cn/cmpop/images/index/ad1/201607/201607291033143254wN.jpg'}}
/>
<Image
style={{width:width,height:height/3}}
source={{uri: 'http://www.10086.cn/cmpop/images/index/ad1/201608/20160805134750658S64.jpg'}}
/>
</Carousel>
</View>
);
}
}
AppRegistry.registerComponent('carouselTest', () => carouselTest);
更新日志：
| 版本号 | 日期 | 说明 |
|---|
| 0.0.2 | 2017-4-25 | 增加小圆点样式配置接口，小圆点是否可以点击等 |
| 0.0.3 | 2017-4-27 | 解决滑动过程中卡顿现象，安卓与iOS方法执行不同步等问题，增加宽度高度配置等 |