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

      组件项目迁移


    좋은 웹페이지 즐겨찾기