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中:

}
     activeDot={}
     paginationStyle={{
         position:'absolute',
         top:0,
         left:0
     }}
     nextButton={}
     prevButton={}
     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)}>
 
     Hello Swiper
 
 
     Beautiful
 
 
     And simple
 

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',
    }
})

你可能感兴趣的:(react-native)