react-native-swiper

安装

npm install react-native-swiper --save

引入

import React,{Component} from 'react';
import { View,Text,StyleSheet,Alert } from 'react-native';
import Swiper from 'react-native-swiper';

render中：

<Swiper style={styles.wrapper}
     showsButtons={true}
     autoplay={true}
     autoplayTimeout={2.5}
     horizontal={true}
     loop={true}
     index={0}
     dot={<View style={{           //未选中的圆点样式
         backgroundColor: 'rgba(0,0,0,.2)',
         width: 10,
         height: 10,
         borderRadius: 5,
         marginLeft: 10,
         marginRight: 9,
         marginTop: 9,
         marginBottom: 9,
     }}/>}
     activeDot={<View style={{    //选中的圆点样式
         backgroundColor: '#f00',
         width: 10,
         height: 10,
         borderRadius: 5,
         marginLeft: 10,
         marginRight: 9,
         marginTop: 9,
         marginBottom: 9,
     }}/>}
     paginationStyle={{
         position:'absolute',
         top:0,
         left:0
     }}
     nextButton={<Text></Text>}
     prevButton={<Text></Text>}
     buttonWrapperStyle={{
         backgroundColor:'#transparent',
         flexDirection: 'row',
         position: 'absolute',
         top: 0,
         left: 0,
         flex: 1,
         paddingHorizontal: 10,
         paddingVertical: 10,
         justifyContent: 'space-between',
         alignItems: 'center'
     }}
     onIndexChanged={this.onIndexChange.bind(this)}>
 <View style={styles.slide1} onPress={this.clickHandler.bind(this)}>
     <Text style={styles.text}>Hello Swiper</Text>
 </View>
 <View style={styles.slide2}>
     <Text style={styles.text}>Beautiful</Text>
 </View>
 <View style={styles.slide3}>
     <Text style={styles.text}>And simple</Text>
 </View>
</Swiper>

style

const styles = StyleSheet.create({
    wrapper: {
        flexGrow:1
    },
    slide1: {
        // flex: 1,
        height:300,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        // flex: 1,
        height:300,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        // flex: 1,
        height:300,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
})