ReactNative学习-滑动查看图片第三方组件react-native-swiper

滑动查看图片第三方组件: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),用法也不复杂。

  • 组件中使用index属性来标识显示当前的页面,当页面滑动的时候这个index肯定是会变化的,我们想在页面滑动后,还能得到它的index值,可以使用onMomentumScrollEnd={(e, state, context)=>{this.currentIndex=state.index}},函数中得到的currentIndex便是当前页面的index。
  • 测试的这个版本,如果loop设置为true,showsButtons设置也为true,会出现滑动有时不正常的情况,所以我将loop设置为false来解决这个问题了。

属性

这里只是列举了一部分经常使用的属性设置,有许多回调函数的使用方法,我也不是特别熟悉,所以还是不误导大家了,.大家可以上官网上详细的了解。

1.Basic

PropDefaultTypeDescription
horizontaltruebool如果值为true时,那么滚动的内容将是横向排列的,而不是垂直于列中的。
looptruebool如果设置为false,那么滑动到最后一张时,再次滑动将不会展示第一张图片。
index0number初始进入的页面标识为0的页面。
showsButtonsfalsebool如果设置为true,那么就可以使控制按钮(即:左右两侧的箭头)可见。
autoplayfalsebool设置为true,则页面可以自动跳转。

2.Custom basic style & content

PropDefaultTypeDescription
width-number如果你没有特殊的设置,就通过flex:1默认为全屏。
height-number如果你没有特殊的设置,就通过flex:1默认为全屏
style{...}style设置页面的样式。

3.Pagination

PropDefaultTypeDescription
showsPaginationtruebool默认值为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可以自定义当前页面圆点的样式

4.Autoplay

PropDefaultTypeDescription
autoplaytruebool设置为true可以使页面自动滑动。
autoplayTimeout2.5number设置每个页面自动滑动停留的时间
autoplayDirectiontruebool圆点的方向允许默认自己控制

5.Control buttons

PropDefaultTypeDescription
showsButtonstruebool是否显示控制箭头按钮
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自定义左箭头按钮样式

转载于:https://www.cnblogs.com/maoyazhi/p/5411745.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值