javascript - React Native onBeforeSnapToItem与onPress结合(React Native onBeforeSnapToItem combined with onPress)

Question

So this is a screen where you slide left to go forward and slide right to go back.(因此，这是一个屏幕，您在其中向左滑动可以前进，而向右滑动可以返回。)

there is also a button at the bottom, when clicked it skip all the slide and it goes to the main screen.(底部还有一个按钮，单击该按钮会跳过所有幻灯片，并转到主屏幕。) onPress={() => this.props.navigation.navigate('Mainscreen')} the issue here is that I would like to change this button so instead of skipping all the slide it just takes you to the next side, basically it will act the same as sliding left.(这里的问题是我想更改此按钮，因此与其跳过所有幻灯片，不如直接将它带到下一页，基本上它的作用与向左滑动相同。) and honestly I still didn't grasp how onBeforeSnapToItem works(老实说，我仍然不了解onBeforeSnapToItem的工作原理) render() { const width = Dimensions.get('window').width * 0.9 return ( <View style={loginStyles.containerExpand}> <View style={loginStyles.carouselOuter}> <ProgressDots current={this.state.currentSlide} total={SLIDE_COUNT} /> <Carousel data={this.slides} renderItem={this.renderItem} onBeforeSnapToItem={this.handleSlideChange} itemWidth={width} sliderWidth={width} /> </View> <View style={loginStyles.buttonContainer}> <TouchableHighlight style={loginStyles.button} onPress={() => this.props.navigation.navigate('Mainscreen')} underlayColor={Colors.buttonSecondaryBkgdActive} > <Text style={loginStyles.buttonText}>{this.buttonText}</Text> </TouchableHighlight> </View> </View> ) } } and this handleSlideChange function(和这个handleSlideChange函数) handleSlideChange = (currentSlide) => { this.setState({currentSlide}) }   ask by Alex Hernandez translate from so

Answer 1

The onBeforeSnapToItem property is just a placeholder for a callback function which is called by the component.(onBeforeSnapToItem属性只是该组件调用的回调函数的占位符。)

What you need is to get a reference to the carousel component and call the snapToNext method of the component in your onPress function.(您需要获得对轮播组件的引用，并在onPress函数中调用该组件的snapToNext方法。) See doc of react-native-snap-carousel(请参阅react-native-snap-carousel的文档) Getting a reference can be done with React.createRef() :(可以使用React.createRef()获得引用：) class Example extends Component { carousel = React.createRef() goToNextSlide = () => { this.carousel.current.snapToNext() } ... render() { return ( ... <Carousel ref={this.carousel} data={this.slides} renderItem={this.renderItem} onBeforeSnapToItem={this.handleSlideChange} itemWidth={width} sliderWidth={width} /> ... <TouchableHighlight style={loginStyles.button} onPress={this.goToNextSlide} underlayColor={Colors.buttonSecondaryBkgdActive} > <Text style={loginStyles.buttonText}>{this.buttonText}</Text> </TouchableHighlight> ... ) } }