如何在 React Native 中从 ScrollView 组件获取 onPress 事件

Question

我是React Native. I have an app with a ScrollView component and several custom components inside it. I would like to trigger an onPressOut event from the ScrollView, so that when the user scrolls, and releases, the child components inside the ScrollView update their states. But, the ScrollView documentation does not include any press events: https://facebook.github.io/react-native/docs/scrollview.html

的新手

我尝试的其他事情：

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

2015-10-26 11:59:13.849 [error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60] Argument 0 (NSNumber) of RCTUIManager.measure must not be null 2015-10-26 11:59:13.850 [error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60] Argument 0 () of RCTUIManager.measure could not be processed. Aborting method call.

不知道那是什么意思... 有任何想法吗？谢谢！

这是我的代码：

<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 元素时出现错误。

Answer 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>

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

onResponderRelease(){
//do stuff

}

Answer 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>

如何在 React Native 中从 ScrollView 组件获取 onPress 事件

How to get onPress event from ScrollView Component in React Native

scrollview

ios

react-native