React Native onBeforeSnapToItem與onPress結合

Question

因此，這是一個屏幕，您在其中向左滑動可以前進，而向右滑動可以返回。 底部還有一個按鈕，單擊該按鈕會跳過所有幻燈片，並轉到主屏幕。 onPress={() => this.props.navigation.navigate('Mainscreen')}

這里的問題是我想更改此按鈕，因此與其跳過所有幻燈片，不如直接將它帶到下一頁，基本上它的作用與向左滑動相同。 老實說，我仍然不了解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>
    )
  }
}

和這個handleSlideChange函數

  handleSlideChange = (currentSlide) => {
    this.setState({currentSlide})
  }

Answer 1

onBeforeSnapToItem屬性只是該組件調用的回調函數的占位符。

您需要獲得對輪播組件的引用，並在onPress函數中調用該組件的snapToNext方法。 請參閱react-native-snap-carousel的文檔

可以使用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>
      ...
    )
  }
}