Carousel轮播图
多张图片或者内容的轮播
代码演示#
// 普通用法
<Carousel>
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
</Carousel>
// 修改默认初始位置
<Carousel defaultIndex={1}>
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
</Carousel>
// 不显示位置指示器
<Carousel showIndicator={false}>
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
</Carousel>
// 自动播放
<Carousel autoPlay>
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
<Image source={{ uri: imageUrl }} />
</Carousel>示例代码与效果
import React from 'react';
import {
StyleSheet,
ScrollView,
View,
Image,
} from 'react-native';
import {
Icon,
List,
Carousel,
theme,
} from '@souche-ui/srn-ui';
class CarouselExample extends React.Component {
static navigation = {
left: {
onPress: function(emitter) {
NavHelper.pop();
}
},
title: {
text: 'Carousel 轮播图'
}
};
state = {
index: 1,
}
render() {
return (
<ScrollView style={styles.container}>
<List.Item title="普通用法" extra={<Icon type={Icon.angleDown} />} />
<View style={styles.carouselWrapper}>
<Carousel
onChange={(index, prevIndex) => console.log(index, prevIndex)}
>
{Array(3).fill(0).map((n, i) => {
return <Image style={styles.image} key={i} source={{uri: `https://picsum.photos/300/200?image=${150 + i + 1}`}} />;
})}
</Carousel>
</View>
<List.Item title="修改默认初始位置" extra={<Icon type={Icon.angleDown} />} />
<View style={styles.carouselWrapper}>
<Carousel
defaultIndex={this.state.index}
>
{Array(3).fill(0).map((n, i) => {
return <Image style={styles.image} key={i} source={{uri: `https://picsum.photos/300/200?image=${60 + i}`}} />;
})}
</Carousel>
</View>
<List.Item title="不显示位置指示器" extra={<Icon type={Icon.angleDown} />} />
<View style={styles.carouselWrapper}>
<Carousel
showIndicator={false}
>
{Array(3).fill(0).map((n, i) => {
return <Image style={styles.image} key={i} source={{uri: `https://picsum.photos/300/200?image=${50 + i}`}} />;
})}
</Carousel>
</View>
<List.Item title="自动播放" extra={<Icon type={Icon.angleDown} />} />
<View style={styles.carouselWrapper}>
<Carousel
autoPlay
>
{Array(3).fill(0).map((n, i) => {
return <Image style={styles.image} key={i} source={{uri: `https://picsum.photos/300/200?image=${40 + i}`}} />;
})}
</Carousel>
</View>
<List.Item title="自定义指示器样式" extra={<Icon type={Icon.angleDown} />} />
<View style={styles.carouselWrapper}>
<Carousel
indicatorStyle={styles.customIndicator}
indicatorActiveStyle={styles.customActiveIndicator}
>
{Array(3).fill(0).map((n, i) => {
return <Image style={styles.image} key={i} source={{uri: `https://picsum.photos/300/200?image=${70 + i}`}} />;
})}
</Carousel>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
carouselWrapper: {
height: 200,
marginBottom: 20,
},
image: {
height: 200,
},
customIndicator: {
backgroundColor: '#ffff00',
opacity: 1,
},
customActiveIndicator: {
backgroundColor: theme('color_white'),
}
});
export default CarouselExample;
API#
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| defaultIndex | 默认初始位置 | number | - | 0 |
| showIndicator | 是否显示位置指示器 | boolean | - | true |
| autoPlay | 是否自动轮播 | boolean | - | false |
| duration | 自动切换间隔时间，单位毫秒 | number | - | 3000 |
| onPress | 点击事件回调，第一个参数是点击时的轮播位置 | (index: number): void | - | - |
| onChange | 轮播切换事件回调 | (index: number, prevIndex: number): void | - | - |
| style | 自定义样式 | object | - | - |
| indicatorStyle | 自定义指示器样式 | object | - | - |
| indicatorActiveStyle | 自定义指示器激活样式 | object | - | - |
方法#
scrollTo#
此方法的参数是一个对象，属性如下：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| index | 滚动到指定位置 | number | - | 0 |
| animated | 是否启用平滑滚动动画 | boolean | - | true |
贡献者#
| 类型 | 参与者 |
|---|---|
| 维护者 | 孟祥翔 |
| 设计者 | 王菲菲 |