【React Native组件】垂直Slider

该博客展示了如何使用React Native创建一个自定义的Slider组件。代码详细解释了每个部分的功能,包括PanResponder的使用来处理滑动手势,以及如何限制滑块在轨道内的移动范围。虽然目前的实现没有进度回调,但提到了可以添加如onValueChange等属性来扩展组件功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import React, { useState, useRef } from 'react';
import { Text, View, PanResponder} from 'react-native';

const VIEW_HEIGHT = 300;
const TRACK_HEIGHT = 260;
const THUMB_HEIGHT = 30;
const TRACK_LENGTH = TRACK_HEIGHT - THUMB_HEIGHT;
const MARGIN_VERTICAL = (VIEW_HEIGHT - TRACK_HEIGHT) / 2;

const Slider = (props) => {
  const [currentY, setCurrentY] = useState(MARGIN_VERTICAL);

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
         //
      },
      onPanResponderMove: (event, gestureState) => {
         const dy = gestureState.dy;
         const newY = - dy;
         const validY = Math.max(0, Math.min(TRACK_LENGTH , newY));
         setCurrentY(validY + MARGIN_VERTICAL);
      },
      onPanResponderRelease: (event, gestureState) => {
        const dy = gestureState.dy;
        const newY = previousY- dy;
        const validY = Math.max(0, Math.min(TRACK_LENGTH , newY));
        setCurrentY(validY + MARGIN_VERTICAL);
      }
    })
  ).current;
  
  return (
    <View style={{
      flex:1,
      justifyContent:"center",
      alignItems:"center",
      
    }}>

      <View style={{  // Slider
        height:VIEW_HEIGHT,
        width:50,
        borderRadius:15,
        background: "pink",
        justifyContent:"center",
        alignItems:"center",
      }}>
        <View style={{
          width:20,
          height:TRACK_HEIGHT,
          background:"skyblue",
          borderRadius:10,
        }}>
        
        </View>
        
        <View style={{  // thumb
          position:"absolute",
          width:THUMB_HEIGHT,
          height:THUMB_HEIGHT,
          borderRadius:THUMB_HEIGHT / 2,
          bottom: currentY,
          background:"#E4D3E4"
        }}
        {...panResponder.panHandlers}
        >
        </View>
      </View>
    </View>
  );
}

export default Slider;

此代码仅作为封装一个Slider的演示,滑动过程中暂无progress回调。

大家可以在props中加入以下属性以丰富Slider功能:

const {
    onValueChange,
    onSlidingStart,
    onSlidingComplete,
    
    value,
    maxValue,
    minValue,

    containerStyle,
    trackStyle,
    thumbStyle,
} = props;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值