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 自动播放间隔
autoHeight bool No 自适应高度
style custom No 自定义样式
initialIndex number 0 No 起始位置
renderAheadNumber number No 前后预加载多少项，默认全部加载
renderDots func 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 面板指示点尺寸
moveOffsetTreshold number 6 No 判定左滑手势偏移量阈值

Example:


import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Dimensions, TouchableOpacity } from 'react-native';
import { ScrollView } from 'qunar-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 = {
            currentIndex: 0
        }
    }

    render() {
        const carouselPages = ['#936', '#09c', '#c63', '#393'];
        const {currentIndex} = this.state;
        return (
            <ScrollView style={styles.container} contentContainerStyle={styles.container}>
                <Carousel
                    style={{flex: 1}}
                    autoplay={true}
                    autoplayInterval={1500}
                    onPress={(i)=> console.log('onPress ' + i)}
                    onChange={(i)=> {
                        this.setState({
                            currentIndex: i
                        })
                    }}
                    renderDots={(activeIndex, childrenLength) =>
                        <View style={{
                            flexDirection: 'row',
                            justifyContent: 'space-around',
                            alignItems: 'center'
                        }}>
                            {
                                carouselPages.map((pageColor, index) =>
                                    <View style={{
                                        width: 8,
                                        height: 8,
                                        borderRadius: 8,
                                        backgroundColor: activeIndex === index ? '#ddd' : '#777',
                                        margin: 5,
                                    }} />
                                )
                            }
                        </View>
                    }
                >
                    {
                        carouselPages.map((pageColor, index) =>
                            <View style={[styles.page, {backgroundColor: pageColor}]}>
                                <Text style={styles.text}>Page {index}</Text>
                            </View>
                        )
                    }
                </Carousel>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    page: {
        width: Dimensions.get('window').width,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        color: 'white',
        fontSize: 24
    },
});

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