1.0.4 • Published 4 years ago
react-native-swiper-x v1.0.4
react-native-swiper-x
一个简单的轮播组件
| Prop | Type | Default | Description |
|---|---|---|---|
wrapperStyle | style | 轮播组件的样式 | |
showButtons | bool | true | 显示左右操作按钮 |
prevButton | element | {'＞'} | 重新定义上一个的按钮 |
nextButton | element | {'＜'} | 重新定义下一个的按钮 |
showPagination | bool | true | 显示分页按钮 |
renderPagination | element | <TouchableOpacity onPress={()=>this.scrollTo(i)} key={i}><View style={styles.dot,dotStyle,index==i?active:null}>) | 可以自己定义分页，样式需自己写 |
dotStyle | style | - | 分页按钮的样式 |
activeDotStyle | style | - | 当前页按钮的样式 |
onChange | function | - | 切换时候的回调，会传入新的序号 |
简单使用
import Swiper from 'react-native-swiper';
//...
<Swiper
// wrapperStyle={styles.wrapper}
// showButtons={false}
// nextButton={<Text style={{marginRight: 10}}>next</Text>}
// prevButton={<Text style={{marginLeft: 10}}>prev</Text>}
// showPagination={false}
// renderPagination={<View style={{position:'absolute',bottom: 20,zIndex: 100,width:'100%'}}><Text style={{textAlign:'center'}}>第n页</Text></View>}
// dotStyle={{width: 30}}
// activeDotStyle={{backgroundColor: 'yellow'}}
>
<Text style={[styles.item,{backgroundColor: '#f44336'}]}>1</Text>
<Text style={[styles.item,{backgroundColor: '#bd9212'}]}>2</Text>
<Text style={[styles.item,{backgroundColor: '#4caf50'}]}>3</Text>
</Swiper>
const styles = StyleSheet.create({
item:{
width: Dimensions.get('window').width,
height: 300,
lineHeight: 100,
fontSize: 30,
color: '#fff',
textAlign: 'center'
}
})效果展示
