React Native Vertical Slider库onChange与onComplete属性使用疑问

报错原因 #

你遇到的number关键字报错，是因为官方示例使用了TypeScript的参数类型标注语法，如果你当前项目是普通JavaScript项目，不支持该语法，直接删除类型标注即可。

核心属性差异说明 #

• onChange：滑块拖动过程中会持续触发，适合需要实时响应滑块值变化的场景
• onComplete：滑块拖动结束、用户抬手时才会触发，适合仅需要最终取值、不需要实时更新的场景

功能实现代码 #

你可以通过React的state存储滑块的当前值，完整实现代码如下：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import VerticalSlider from 'rn-vertical-slider';

const VerticalSliderDemo = () => {
  // 初始化state存储滑块值，可根据需求修改初始值、最小值、最大值
  const [sliderVal, setSliderVal] = useState(30);

  return (
    <View style={{ padding: 20 }}>
      <Text>当前滑块值：{sliderVal}</Text>
      <VerticalSlider
        value={sliderVal}
        min={0}
        max={100}
        step={1}
        height={300}
        width={50}
        // 实时更新滑块值
        onChange={(value) => {
          setSliderVal(value);
        }}
        // 拖动结束后触发
        onComplete={(value) => {
          console.log("滑块最终值：", value);
          // 此处可添加拖动结束后的业务逻辑
        }}
      />
    </View>
  );
};

export default VerticalSliderDemo;

TypeScript项目适配说明 #

如果你使用的是TypeScript项目依然出现报错，可以手动对值做类型转换，写法如下：

onChange={(value: number) => {
  setSliderVal(Number(value));
}}

内容的提问来源于stack exchange，提问作者Aeneator