Carousel

轮播组件 Author: yuhao.ju

Install

qnpm install @qnpm/react-native-ui-carousel

Props

Prop	Type	Default	Required	Description
children	node		Yes	轮播的内容
loop	bool	true	No	是否循环显示
autoplay	bool	false	No	是否自动播放
autoplayInterval	number	3000	No	自动播放间隔
style	custom		No	自定义样式
initialIndex	number	0	No	起始位置
renderAheadNumber	number		No	前后预加载多少项，默认全部加载
onChange	func		No	切换后的回调
onPress	func		No	点击每项之后的回调
dots	bool	true	No	是否显示面板指示点
dotsSpace	number	20	No	面板指示点间距
dotsBottomOffset	number	50	No	面板指示点距离容器下方的距离
dotsColor	string	'#aaa'	No	面板指示点默认颜色
dotsActiveColor	string	'#fff'	No	面板指示点激活状态颜色
dotsSize	number	16	No	面板指示点尺寸

Example:

import React, {Component, StyleSheet, View, Text, Image, Dimensions, TouchableOpacity} from 'react-native'

import Carousel from '@qnpm/react-native-ui-carousel'
import commonStyle from './layout/style.js'

class CarouselExample extends Component {
    constructor (props) {
        super(props)
        this.state = {
            imgs: [0, 1, 2, 3, 4]
        }
    }

    render() {
        let list = []
        this.state.imgs.forEach((img, i) => {
            list.push(
                <View style={styles.page}>
                    <Image
                        style={styles.img}
                        resizeMode = {'stretch'}
                        source={{uri: 'http://placeholdit.imgix.net/~text?txtsize=33&bg=09c&txtclr=fff&txt=page' + i + '&w=320&h=400'}}
                    />
                </View>
            );
        });

        return (
            <Carousel
                ref="Carousel"
                autoplay={true}
                dotsBottomOffset={20}
                dotsActiveColor={'yellow'}
                onChange={(i)=>this.setState({initialIndex: i})}
            >
                {list}
            </Carousel>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    page: {
        width: Dimensions.get('window').width,
        flex: 1,
        alignItems: 'stretch',
    },
    img: {
        flex:1,
    },
});

module.exports = {
    title: 'Carousel',
    examples: [{
        render: () => {
            return (<CarouselExample />)
        }
    }]
}