javascript - 在 ReactNative 中使用 slider 滚动水平 ScrollView

Question

我正在尝试在水平 ScrollView 中设置一个 slider ，以使我可以更快地滚动页面。我能够将页面的位置链接到 slider 的值，这样当我滚动页面时， slider 的拇指就会相应地移动。
我正在使用 React Native Slider和一个 ScrollView 。
这是我不幸的结果。

我对 RN 很陌生，所以我可能在这里遗漏了一些重要的东西。

class Comp extends Component {

  state = {
    width : 0, 
    value : 0, 
    cursor : 0
  }

  moveTheCursor = (val) => {
    this.scrollView.scrollTo({x: val, y: 0, animated: true})
  }

  scrollTheView = (event) => {
    this.setState({
      value : Math.floor(event.nativeEvent.contentOffset.x),
      cursor : Math.floor(event.nativeEvent.contentOffset.x)
    })
  }

  checkWidth = ({nativeEvent}) => {
    arrayWidth.push(nativeEvent.layout.width)
    let ww = (arrayWidth[0] * this.props.data.length) - Math.round(Dimensions.get('window').width);
    this.setState({
      width : ww,
    })
  }

  render() {
    return (
      <React.Fragment>
        <ScrollView 
          ref={ref => this.scrollView = ref}
          horizontal
          style={styles.car}
          scrollEventThrottle={1}
          onScroll={this.scrollTheView}
          showsHorizontalScrollIndicator={false}
          decelerationRate={0}
          //snapToInterval={200} //your element width
          snapToAlignment={"center"}
        >

        </ScrollView>
          
        <Slider
          style={styles.containerSlide}
          thumbImage={require("./../../assets/img/buttons/thumb.png")}
          trackImage={require("./../../assets/img/buttons/bar.png")}
          minimumValue={0}
          maximumValue={this.state.width}
          onValueChange={this.moveTheCursor}
          value={this.state.cursor}
        />
        

      </React.Fragment>
    );
  }
} 

问题是，当我使用 slider 的拇指滚动页面时，它会触发滚动，不可避免地会重置 slider 拇指的位置，因此它的行为不正确(闪烁但大多不准确)。
有没有办法解决这个循环？

Answer 1

您可以使用 Slider 的 onSlidingStart 实现所需的行为。和 onSlidingComplete + ScrollView 的 scrollEnabled
它看起来像

....
const [isSliding, setIsSliding] = useState(false);
....
<ScrollView scrollEnabled={!isSliding}>
   <Slider 
      onSlidingStart={() => setIsSliding(true)}
      onSlidingComplete={() => setIsSliding(false)}
   />
</ScrollView>