标签:
滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android。
下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善。
官方文档:https://github.com/leecade/react-native-swiper
效果图:

npm install --save react-native-swiper
import React, {AppRegistry,Component,StyleSheet,Text,View} from ‘react-native‘;
import Swiper from ‘react-native-swiper‘;
class swiper extends Component {
render() {
return (
<Swiper style={styles.wrapper}
showsButtons={true}
index={1}
loop={false}
>
<View style={styles.slide1}>
<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>
)
}
}
var styles = StyleSheet.create({
wrapper: {
},
slide1: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#9DD6EB‘,
},
slide2: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#97CAE5‘,
},
slide3: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#92BBD9‘,
},
text: {
color: ‘#fff‘,
fontSize: 30,
fontWeight: ‘bold‘,
}
})
AppRegistry.registerComponent(‘swiper‘, () => swiper)
|
这个组件可以应用于各种轮播图,组件内置的设置还是很全面的(除了现在的版本还不兼容Android),用法也不复杂。
这里只是列举了一部分经常使用的属性设置,有许多回调函数的使用方法,我也不是特别熟悉,所以还是不误导大家了,.大家可以上官网上详细的了解。
| Prop | Default | Type | Description |
|---|---|---|---|
| horizontal | true | bool | 如果值为true时,那么滚动的内容将是横向排列的,而不是垂直于列中的。 |
| loop | true | bool | 如果设置为false,那么滑动到最后一张时,再次滑动将不会展示第一张图片。 |
| index | 0 | number | 初始进入的页面标识为0的页面。 |
| showsButtons | false | bool | 如果设置为true,那么就可以使控制按钮(即:左右两侧的箭头)可见。 |
| autoplay | false | bool | 设置为true,则页面可以自动跳转。 |
| Prop | Default | Type | Description |
|---|---|---|---|
| width | - | number | 如果你没有特殊的设置,就通过flex:1默认为全屏。 |
| height | - | number | 如果你没有特殊的设置,就通过flex:1默认为全屏。 |
| style | {...} | style | 设置页面的样式。 |
| Prop | Default | Type | Description |
|---|---|---|---|
| showsPagination | true | bool | 默认值为true,在页面下边显示圆点,以标明当前页面位于第几个。 |
| paginationStyle | {...} | style | 设置页面原点的样式,自定义的样式会和默认样式进行合并。 |
| renderPagination | |||
| dot | <View style={{backgroundColor:‘rgba(0,0,0,.2)‘, width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> | element | 可以自定义不是当前圆点的样式 |
| activeDot | <View style={{backgroundColor: ‘#007aff‘, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> | element | 可以自定义当前页面圆点的样式 |
| Prop | Default | Type | Description |
|---|---|---|---|
| autoplay | true | bool |
设置为true可以使页面自动滑动。 |
| autoplayTimeout | 2.5 | number |
设置每个页面自动滑动停留的时间 |
| autoplayDirection | true | bool |
圆点的方向允许默认自己控制 |
| Prop | Default | Type | Description |
|---|---|---|---|
| showsButtons | true | bool |
是否显示控制箭头按钮 |
| buttonWrapperStyle |
{position: ‘absolute‘, paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:‘flex-start‘}
|
style |
定义默认箭头按钮的样式 |
| nextButton |
<Text style={{fontSize:60, color:‘#00a7ec‘, paddingTop:30, paddingBottom:30}}>‹</Text>
|
element |
自定义右箭头按钮样式 |
| prevButton |
<Text style={{fontSize:60, color:‘#00a7ec‘, paddingTop:30, paddingBottom:30}}>›</Text>
|
element |
自定义左箭头按钮样式 |
ReactNative学习-滑动查看图片第三方组件react-native-swiper
标签:
原文地址:http://www.cnblogs.com/maoyazhi/p/5411745.html