Hello, folks!

🦄 This is a powerful Swiper hooks component for React Native

✨ 为React Native开发的Swiper Hooks组件

📚 Welcomes to provide your valuable comments or suggestions by 'Issues' or my contact information

✨ 欢迎通过”issues“或我的联系方式，为我提供宝贵意见

👨🏻‍💻 Powered by Voyz Shen ✨ Shanghai Jiao Tong University, Ctrip

Catalog

• How to use
• Demo
• Properties
• Functions
• Versions

---

How to use

• installation

npm i react-native-swiper-hooks --save

• import

import Swiper from 'react-native-swiper-hooks'

• use it

...
const _renderList = ()=>{
  let listData = [
      {
        title:'1',
        bgColor:'#f00'
      },
      {
        title:'2',
        bgColor:'#0f0'
      },
      {
        title:'3',
        bgColor:'#00f'
      },
    ]
    return (
      listData.map((item,idx)=>{
        return (
          <View style={{width:WIDTH,height:300,backgroundColor:item.bgColor,justifyContent: 'center',alignItems: 'center'}} key={idx}>
              <Text>{item.title}</Text>
          </View>
        )
      })
    )
}

...

<Swiper height={300}
        autoplay={true}
        loop={true}
        showPagination={true}
        >
  {_renderList()}
</Swiper>

...

• update

npm update react-native-swiper-hooks

---

Demo

transform-mode ↓

width={WIDTH}
autoplay={false}
initIndex={0}
loop = {false}
showPagination = {false}
transformMode={true}
transformModeMinSize={174}
transformModeMaxSize={_rightViewHeight}

autoplay ↓

height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}

non-autoplay ↓

height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={true}
showPagination={true}
direction={'row'}

non-loop ↓

height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={false}
showPagination={true}
direction={'row'}

vertical scrolling ↓

height={300}
paginationPosition={'left'}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'column'}

diff Size ↓

height={300}
childWidth={WIDTH-100}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}

(child:{width=WIDTH-100})

init Index ↓

height={300}
initIndex={1}
showPagination={false}

---

Properties

- Basic -

Prop	Default	Options	Type	Description
width	[width of screen]	/	Number	Width of the Swiper container
				容器宽度
height	[height of screen]	/	Number	Height of the Swiper container
				容器高度
childWidth	/	/	Number	Width of the child component（when width of container and child component）
				子元素宽度（当子元素宽度与容器宽度不同时传此参数）
childHeight	/	/	Number	Width of the child component（when height of container and child component）
				子元素高度（当子元素宽度与容器高度不同时传此参数）
boxBackgroundColor	/	/	Color	Background color of the Swiper container
				容器背景颜色
outerContainerStyle	{}	/	Object	style of the outer container
				外层容器样式
initIndex	0	/	Number	Index of the init child
				初始页
scrollToIndex	0	/	Number	scroll to the child
				参数控制滚动至某子元素
scrollToIndexWithAnimate	false	true/false	Boolean	scroll to the child with Animtion
				参数控制滚动至某子元素时是否开启动画
scrollDuration	300	/	Number	(Android only)Duration (ms) on page turning
				翻页滚动持续时间
direction	'row'	'row' / 'column'	String	Direction of the scrolling
				滚动方向
minOffset	10	/	Number	Threshold of scroll distance for page turning
				翻页的滚动阈值
autoplay	true	true / false	Boolean	Enable autoplay
				是否自动播放
loop	true	true / false	Boolean	Enable loop mode
				是否循环滚动
autoplayGapTime	3	/	Number	second between autoplay transitions
				自动播放时间间隔
autoplayDirection	true	true / false	Boolean	Enable forward direction when autoplay
				是否正向自动播放
scrollEnabled	true	true / false	Boolean	Enable hand-rolling
				是否可以手动滚动
animated	true	true / false	Boolean	Enable smooth scrolling animation
				是否开启滚动动画
bounces	true	true / false	Boolean	Enable pull flexibly when you scroll to the head and tail
				到达首尾时是否可以弹性拉动一截
transformMode	false	true / false	Boolean	In this mode,size will change between transformModeMinSize and transformModeMaxSize while scrolling
				是否开启变形模式
transformModeMinSize	[height of screen]	/	Number	(transformMode = true only) min size
				变形模式下最小尺寸
transformModeMaxSize	[height of screen]	/	Number	(transformMode = true only) max size
				变形模式下最大尺寸

- Pagination -

Prop	Default	Options	Type	Description
showPagination	true	true / false	Boolean	Enable pagination shower
				是否显示页码器
paginationDirection	'bottom'	'bottom' / 'top' / 'left' / 'right'	String	Position of the pagination
				页码器位置
paginationOffset	5	/	Number	Distance between pagination shower and side
				页码器距边距离
paginationUnselectedSize	6	/	Number	Size of the point (non-current)
				提示点大小（非当前页）
paginationSelectedSize	10	/	Number	Size of the point (current)
				提示点大小（当前页）
paginationUnselectedColor	'#FFFFFF'	/	Color	Color of the point (non-current)
				提示点颜色（非当前页）
paginationSelectedSize	'#000000'	/	Color	Color of the point (current)
				提示点颜色（当前页）

Functions

- callback -

Func	Params	Type	Description
onPaginationChange	index	Number	Retrun the index of current page when it changes
			页码改变时返回当前页码索引
onScrollBeginDrag	nativeEvent	Object	Callback on scroll begin drag
			开始拖动时的回调函数
onScrollEndDrag	nativeEvent	Object	Callback on scroll end drag
			结束拖动时的回调函数
getScrollDistance	/	int	get distance on scrolling
			获取手动滚动距离
getChildrenOnPageinationChange	/	int	get JSX Array of Children
			获取JSX数组
getTransformModeCurrSize	/	int	get current size in transform-mode
			变形模式下获取尺寸值

Versions

• v1.3.8

[优化] 安卓不触发onScrollEndDrag时增加防抖逻辑

• v1.3.5

[添加新参数] outerContainerStyle: 外层容器样式

• v1.3.4

[添加新参数] scrollToIndexWithAnimate:参数控制滚动至某子元素时是否开启动画

• v1.3.0

[bug修复]【安卓】防止滑动停止未触发_onScrollEndDrag

• v1.3.0

[新功能] 添加变形模式

• v1.2.9

[bug修复] scrollto参数保护

• v1.2.8

[修复] getScrollDistance纵向滚动距离修复

• v1.2.6

[添加新参数] (安卓) scrollDuration: 翻页滚动持续时间

• v1.2.5

[性能优化] 手动滚动时暂停自动滚动的计时器

• v1.2.4

[性能优化] 避免scrollToIndex与自动播放的冲突

• v1.2.3

[添加新方法] getChildrenOnPageinationChange获取JSX数组

• v1.2.2

[添加新参数] scrollToIndex参数控制滚动至某子元素

• v1.2.1

[添加新方法] 获取手动滚动距离 [性能优化] 优化手动滚动时与自动滚动的冲突

• v1.2.0

[添加新功能] 允许swiper内子元素尺寸与容器尺寸不同

• v1.1.3

[性能优化] 修复页码器更新延迟
[bug修复] 修复循环模式下翻页至页尾时的bug

• v1.1.2

更新文档

• v1.1.1

[bug修复] 修复安卓循环模式下翻页闪屏问题

• v1.1.0

组件项目迁移