SRN-UI 3.0 版本已经发布,此版本组件库与本站点不再维护,请尽快升级到新版 前往新版文档

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

贡献者#

类型参与者
维护者孟祥翔
设计者王菲菲