React Native를 위한 강력한 Swiper 후크 구성 요소
Github仓库: https://github.com/Voyzz/react-native-swiper-hooks
NPM仓库: https://www.npmjs.com/package/react-native-swiper-hooks
안녕하세요 여러분!
🦄 This is a powerful Swiper hooks component for React Native
✨ 为React Native开发的Swiper Hooks组件
📚 '이슈' 또는 제 연락처로 여러분의 소중한 의견이나 제안을 환영합니다.
✨ 欢迎通过”issues“或我的联系方式,为我提供宝贵意见
👨🏻💻 Voyz Shen 제공
✨ 상하이 자오퉁 대학교, 씨트립
목록
사용하는 방법
설치
npm i react-native-swiper-hooks --save
수입
import Swiper from 'react-native-swiper-hooks'
사용법
...
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>
...
업데이트
npm update react-native-swiper-hooks
--
데모
자동 재생 ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}
자동 재생 불가 ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={true}
showPagination={true}
direction={'row'}
비루프 ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={false}
showPagination={true}
direction={'row'}
세로 스크롤 ↓
height={300}
paginationPosition={'left'}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'column'}
차이 크기 ↓
height={300}
childWidth={WIDTH-100}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}
(child:{width=WIDTH-100})
초기화 인덱스 ↓
속성
- 기초적인 -
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
容器背景颜色
initIndex
0
/
Number
Index of the init child
初始页
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
到达首尾时是否可以弹性拉动一截
- 페이지네이션 -
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)
提示点颜色(当前页)
기능
- 콜백 -
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
结束拖动时的回调函数
버전
-
v1.2.0
[添加新功能] 允许swiper内子元素尺寸与容器尺寸不同
-
v1.1.3
[性能优化] 修复页码器更新延迟
[bug修复] 修复循环模式下翻页至页尾时的bug
-
v1.1.2
更新文档
-
v1.1.1
[bug修复] 修复安卓循环模式下翻页闪屏问题
-
v1.1.0
组件项目迁移
Reference
이 문제에 관하여(React Native를 위한 강력한 Swiper 후크 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/voyzz/a-powerful-swiper-hooks-component-for-react-native-ln
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
🦄 This is a powerful Swiper hooks component for React Native
✨ 为React Native开发的Swiper Hooks组件
📚 '이슈' 또는 제 연락처로 여러분의 소중한 의견이나 제안을 환영합니다.
✨ 欢迎通过”issues“或我的联系方式,为我提供宝贵意见
👨🏻💻 Voyz Shen 제공
✨ 상하이 자오퉁 대학교, 씨트립
목록
사용하는 방법
npm i react-native-swiper-hooks --save
import Swiper from 'react-native-swiper-hooks'
...
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>
...
npm update react-native-swiper-hooks
--
데모
자동 재생 ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}
자동 재생 불가 ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={true}
showPagination={true}
direction={'row'}
비루프 ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={false}
showPagination={true}
direction={'row'}
세로 스크롤 ↓
height={300}
paginationPosition={'left'}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'column'}
차이 크기 ↓
height={300}
childWidth={WIDTH-100}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}
(child:{width=WIDTH-100})
초기화 인덱스 ↓
속성
- 기초적인 -
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
容器背景颜色
initIndex
0
/
Number
Index of the init child
初始页
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
到达首尾时是否可以弹性拉动一截
- 페이지네이션 -
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)
提示点颜色(当前页)
기능
- 콜백 -
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
结束拖动时的回调函数
버전
-
v1.2.0
[添加新功能] 允许swiper内子元素尺寸与容器尺寸不同
-
v1.1.3
[性能优化] 修复页码器更新延迟
[bug修复] 修复循环模式下翻页至页尾时的bug
-
v1.1.2
更新文档
-
v1.1.1
[bug修复] 修复安卓循环模式下翻页闪屏问题
-
v1.1.0
组件项目迁移
Reference
이 문제에 관하여(React Native를 위한 강력한 Swiper 후크 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/voyzz/a-powerful-swiper-hooks-component-for-react-native-ln텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)