Question

我试图在水平ScrollView内设置一个滑块，使我可以更快地滚动页面。我能够将页面的位置链接到滑块的值，以便在滚动页面时滑块的拇指相应地移动。

我正在使用React Native Slider和ScrollView。这是我不幸的结果。

What I get

我对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>
    );
  }
}

问题是，当我使用滑块的拇指滚动页面时，它触发了不可避免地重置滑块拇指位置的滚动，因此它的行为不正确（闪烁，但大多数情况下是不准确的）。有没有办法解决这个循环？

Answer 1

您可以使用Slider的onSlidingStart和onSlidingComplete + ScrollView的scrollEnabled

实现所需的行为

看起来像

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

使用滑块在ReactNative中滚动水平scrollView

1 个答案: