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属性只是由组件调用的回调函数的占位符。

您需要获得对轮播组件的引用，并在snapToNext函数中调用该组件的onPress方法。参见doc of 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>
      ...
    )
  }
}

React Native onBeforeSnapToItem与onPress结合

1 个答案: