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