gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 15:11:19 29 4
gpt4 key购买 nike

我正在尝试在水平 ScrollView 中设置一个 slider ,以使我可以更快地滚动页面。我能够将页面的位置链接到 slider 的值,这样当我滚动页面时, slider 的拇指就会相应地移动。
我正在使用 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>
);
}
}
问题是,当我使用 slider 的拇指滚动页面时,它会触发滚动,不可避免地会重置 slider 拇指的位置,因此它的行为不正确(闪烁但大多不准确)。
有没有办法解决这个循环?

最佳答案

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

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

关于javascript - 在 ReactNative 中使用 slider 滚动水平 ScrollView ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56715985/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com