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

时间：2023-11-28 13:01:56

滑动查看图片第三方组件：react-native-swiper，现在的版本为：1.4.3，该版本还不支持Android。

下面介绍的是该组件的一些用法，可能总结的不完整，希望大家一起来共同完善。

官方文档：https://github.com/leecade/react-native-swiper

效果图：

ReactNative学习－滑动查看图片第三方组件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

Prop Default Type Description
horizontal true bool 如果值为true时，那么滚动的内容将是横向排列的，而不是垂直于列中的。
loop true bool 如果设置为false，那么滑动到最后一张时，再次滑动将不会展示第一张图片。
index 0 number 初始进入的页面标识为0的页面。
showsButtons false bool 如果设置为true，那么就可以使控制按钮（即：左右两侧的箭头）可见。
autoplay false bool 设置为true，则页面可以自动跳转。

2.Custom basic style & content

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

3.Pagination

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 可以自定义当前页面圆点的样式

4.Autoplay

Prop Default Type Description
autoplay true bool 设置为true可以使页面自动滑动。
autoplayTimeout 2.5 number 设置每个页面自动滑动停留的时间
autoplayDirection true bool 圆点的方向允许默认自己控制

5.Control buttons

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 自定义左箭头按钮样式

相关文章