在点击时向左或向右水平滑动以反应本机滚动视图

Question

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

但我想添加更多手势，当用户点击左侧或右侧（距边缘一定距离）时，它会自动映射交换手势。我该怎么做？

Answer 1

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

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

中的 x

Answer 2

我假设您的滚动视图看起来像这样，带有 pagingEnabled 和 horizontal 道具。

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

位置可以通过以下方式计算：

this.state.xOffset/ DeviceSize.width

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

（在这种情况下内容必须是全角）

在点击时向左或向右水平滑动以反应本机滚动视图

react native scrollview horizontal swipe left or right on tap

scrollview

gesture

react-native