反应原生滚动视图水平滑动时点击左或右滑动

Question

我正在全屏模式下显示图片库。我正在使用水平滚动视图来滚动图片。现在，我可以通过向左或向右滑动来滚动图片，并使用启用pagingEnabled道具。

但是我想添加更多手势，当用户点击左侧或右侧(与边缘的距离(时，它将自动映射交换手势。 我该怎么做？

Answer 1

我假设您的滚动视图看起来像这样，带有分页启用和水平道具。

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={event => {
      this.setState({xOffset: event.nativeEvent.contentOffset.x })
   }}>
      // Content 
</ScrollView>

仓位可以用以下公式计算：

this.state.xOffset/ DeviceSize.width

onMomentumScrollEnd 每次在 ScrollView 中滚动项目时都会调用

(在这种情况下，内容必须是全角(

Answer 2

获取<ScrollView>的ref，然后scrollToEnd()或使用scrollTo方法 - https://facebook.github.io/react-native/docs/scrollview.html#scrollto

要计算页码，您可以使用onLayout来计算页面的大小。如果是设备的宽度，那么这很容易，只需使用Dimensions.get('window').width然后将其馈送到scrollTo中的x。