Github 仓库 : https://github.com/Voyzz/reac…
NPM 仓库 : https://www.npmjs.com/package…

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

<span id=’howtouse’><span>

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

<span id=’demo’><span>

Demo

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}

<span id=’properties’><span>

Properties

– Basic –

– Pagination –

Functions

<span id=’functions’><span>

– callback –

<span id=’versions’><span>

Versions

• v1.2.0

[增加新性能] 容许 swiper 内子元素尺寸与容器尺寸不同

• v1.1.3

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

• v1.1.2

更新文档

• v1.1.1

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

• v1.1.0

组件我的项目迁徙