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 -

- Pagination -

Functions

- callback -

Versions

• 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

组件项目迁移