如何从 React Native 中的 ScrollView 组件获取 onPress 事件答案

【问题标题】：How to get onPress event from ScrollView Component in React Native如何从 React Native 中的 ScrollView 组件获取 onPress 事件
【发布时间】：2015-10-26 16:15:36
【问题描述】：

我是React Native 的新手。我有一个带有ScrollView 组件的应用程序和其中的几个自定义组件。我想从 ScrollView 触发一个 onPressOut 事件，这样当用户滚动和释放时，ScrollView 内的子组件会更新它们的状态。但是，ScrollView 文档不包含任何新闻事件：https://facebook.github.io/react-native/docs/scrollview.html

我尝试过的其他事情：

我尝试将滚动视图包装在 TouchableWithoutFeedback 组件中，当我这样做时，我一尝试滚动就会收到错误消息：

2015-10-26 11:59:13.849 [错误][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60] RCTUIManager.measure 的参数 0 (NSNumber) 不能为空 2015-10-26 11:59:13.850 [错误][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60] 无法处理 RCTUIManager.measure 的参数 0 ()。中止方法调用。

不知道这意味着什么... 有任何想法吗？谢谢！

这是我的代码：

<View ref="theWrapperView" style={styles.theWrapperView}>
            <ScrollView 
                onScroll={this.onScroll.bind(this)}
                onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}

                style={styles.scrollView}
                contentContainerStyle={styles.scrollViewContentContainer}

                showsHorizontalScrollIndicator={true}
                scrollEventThrottle={10}
                pagingEnabled={true}
                horizontal={true}
                automaticallyAdjustContentInsets={false}
                snapToAlignment={'center'}
                snapToInterval={20}
                zoomScale={1.5}
                centerContent = {true}

            >
                {cards}
            </ScrollView>
        </View>

当我将 View 元素更改为 TouchableWithoutFeedback 元素时，我得到了错误。

【问题讨论】：

你能给我们看看代码吗？
您是否只是想弄清楚滚动何时结束？ Scroll View 调度可能对您有用的其他类型的事件.. 只听一个 onScroll 并用滚动偏移量做一些数学甚至可能就足够了
@WillSheppard 我添加了我的代码，希望对您有所帮助。
@GorkemYurtseven 我想知道用户何时“释放”滚动视图（即 onPress 或 onPressOut）。 onScroll 和 onScrollEnd 事件不一定对我有帮助，因为我启用了分页，所以当用户释放滚动视图时，它会锁定最近的页面，并且 onScrollEnd 事件在滚动动画完成之前不会触发，这会发生用户释放 ScrollView 后的一秒。

标签： ios scrollview react-native

【解决方案1】：

我在研究了 React Native 源代码后发现了这一点：https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js

事实证明，实际上还有许多其他事件可以通过 ScrollResponder mixin 获得，在线文档中没有提到这些事件。不必包含 mixin 来访问这些事件，因为它们已经是 ScrollView 组件的一部分。对我有用的是 onResponderRelease，它会在您释放 ScrollView 时触发，如下所示：

<View ref="theWrapperView" style={styles.theWrapperView}>
            <ScrollView 
                onScroll={this.onScroll.bind(this)}
                onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
                onResponderRelease = {this.onResponderReleaseHandler.bind(this)}
            >
                {cards}
            </ScrollView>
        </View>

并在类中定义一个处理程序：

onResponderRelease(){
//do stuff

}

【讨论】：

【解决方案2】：

onTouchEnd will help you to get this

  <ScrollView contentContainerStyle={{ paddingHorizontal: 22, top: -16 }}
                    onTouchEnd={(e) => {
                      //Here define your ScrollView Press Event
                    }}
  >
     {this.props.children}
  </ScrollView>

【讨论】：

这应该是公认的答案，正是我想要的，疯狂的是文档中没有提到它。