Carousel

轮播

Demo

Example

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Dimensions,
  View,
  Image,
} from 'react-native';

var Carousel = require('./fastui-carousel');

var CarouselDemo = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <Carousel>
                    <View style={styles.page}>
                        <Image
                            style={styles.img}
                            source={{uri: 'http://7xkm02.com1.z0.glb.clouddn.com/page1.png'}}
                        />
                    </View>
                    <View style={styles.page}>
                        <Image
                            style={styles.img}
                            source={{uri: 'http://7xkm02.com1.z0.glb.clouddn.com/page2.png'}}
                        />
                    </View>
                    <View style={styles.page}>
                        <Image
                            style={styles.img}
                            source={{uri: 'http://7xkm02.com1.z0.glb.clouddn.com/page3.png'}}
                        />
                    </View>
                </Carousel>
            </View>
        );
    }
});

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

AppRegistry.registerComponent('CarouselDemo', () => CarouselDemo);

More Options

showPagination = {true}
paginationSize = {16}
paginationSpace = {20}
paginationBottomOffset = {50}
paginationColor = '#fff'
activePaginationColor = '#aaa'