React Native中使用react-native-slider时，如何无触碰获取对象位置？

以下是几种实用的实现方式：

• 直接读取绑定的状态变量
  react-native-slider的value通常会和组件的本地状态（如useState）绑定，你可以直接读取这个状态变量来获取当前滑块位置，完全不需要触碰滑块。示例代码：

  import Slider from '@react-native-community/slider';
  import { useState } from 'react';
  
  const YourComponent = () => {
    const [sliderValue, setSliderValue] = useState(0);
  
    // 调用此函数即可获取当前滑块位置
    const getCurrentSliderPosition = () => {
      console.log('滑块当前位置:', sliderValue);
      return sliderValue;
    };
  
    return (
      <Slider
        value={sliderValue}
        onValueChange={setSliderValue}
        minimumValue={0}
        maximumValue={100}
      />
    );
  };
  

• 使用Ref直接访问滑块实例
  若未绑定本地状态，可通过React的useRef获取滑块组件实例，直接读取其value属性：

  import Slider from '@react-native-community/slider';
  import { useRef } from 'react';
  
  const YourComponent = () => {
    const sliderRef = useRef(null);
  
    const getCurrentSliderPosition = () => {
      if (sliderRef.current) {
        const currentPosition = sliderRef.current.value;
        console.log('滑块当前位置:', currentPosition);
        return currentPosition;
      }
      return 0;
    };
  
    return (
      <Slider
        ref={sliderRef}
        initialValue={0}
        minimumValue={0}
        maximumValue={100}
        onValueChange={(val) => console.log('滑动更新:', val)}
      />
    );
  };
  

• 外部状态管理同步读取
  如果你用Redux、Zustand等全局状态管理工具，可在滑块的onValueChange回调中同步更新全局状态，之后在应用任何位置都能直接读取该全局状态的值，无需触碰滑块。

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