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

【问题标题】：react native scrollview horizontal swipe left or right on tap在点击时反应原生滚动视图水平向左或向右滑动
【发布时间】：2018-01-24 18:37:59
【问题描述】：

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

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

【问题讨论】：

标签： react-native scrollview gesture

【解决方案1】：

我假设带有 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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回答，但您能详细说明一下吗？比如我如何跟踪边缘的点击手势？
@dev-jim 要检查边缘是否有水龙头，您必须在此处放置一个不可见的元素来测试水龙头。
我明白了。无论如何感谢您的帮助。你的回答给了我灵感。所以我会接受它作为正确答案。
谢谢@dev-jim 请你分享你是怎么做到的。是隐形元素吗？还有scrollTo 方法？