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

杰克·卡利什

我是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元素时,我得到了错误。

杰克·卡利什

在研究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

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native-从组件获取价值-onPress

来自分类Dev

如何在子组件中设置 onPress 事件?

来自分类Dev

如何将 storeId 绑定到 React-Native 中的 onPress 事件?

来自分类Dev

React Native:如何从 map() 生成的组件单独控制每个 onpress()

来自分类Dev

React Native:如何在onPress事件上更改视图

来自分类Dev

React Native:ScrollView内部的TouchableOpacity onPress问题

来自分类Dev

如何在React Native中获取Text组件的行数?

来自分类Dev

返回JSX组件onPress react-native

来自分类Dev

React Native、ScrollView 分页事件

来自分类Dev

在React Native中渲染一个组件onPress(TouchableOpacity / Button)

来自分类Dev

为什么 onPress 在 react-native-maps 的标记文档中列为事件?

来自分类Dev

如何获取Scrollview项目React-native的索引?

来自分类常见问题

获取React Native中ScrollView的当前滚动位置

来自分类Dev

获取事件处理程序中对React组件的引用

来自分类Dev

在React的事件处理程序中获取组件的prop

来自分类Dev

如何在另一个文件中获取组件的状态 react native

来自分类Dev

如何在React Native中让组件控制同级组件?

来自分类Dev

如何从React组件中的React函数获取价值

来自分类Dev

如何覆盖React Native组件?

来自分类Dev

如何使用React Native iOS将ListView放入ScrollView中?

来自分类Dev

React Native-如何测量ScrollView中内容的大小?

来自分类Dev

如何防止在 React-Native ScrollView 中滚动多个元素?

来自分类Dev

React Native:组件上的onPress不起作用

来自分类Dev

OnPress从循环更改组件样式-带钩子的React Native

来自分类Dev

react-native-maps-多边形onPress事件

来自分类Dev

如何从Angular的事件处理程序中获取组件实例?

来自分类Dev

如何在Div组件的onclick事件中获取textnode

来自分类Dev

如何确定哪个组件在React中触发事件处理程序?

来自分类Dev

如何在React子组件中设置事件处理程序

Related 相关文章

  1. 1

    React Native-从组件获取价值-onPress

  2. 2

    如何在子组件中设置 onPress 事件?

  3. 3

    如何将 storeId 绑定到 React-Native 中的 onPress 事件?

  4. 4

    React Native:如何从 map() 生成的组件单独控制每个 onpress()

  5. 5

    React Native:如何在onPress事件上更改视图

  6. 6

    React Native:ScrollView内部的TouchableOpacity onPress问题

  7. 7

    如何在React Native中获取Text组件的行数?

  8. 8

    返回JSX组件onPress react-native

  9. 9

    React Native、ScrollView 分页事件

  10. 10

    在React Native中渲染一个组件onPress(TouchableOpacity / Button)

  11. 11

    为什么 onPress 在 react-native-maps 的标记文档中列为事件?

  12. 12

    如何获取Scrollview项目React-native的索引?

  13. 13

    获取React Native中ScrollView的当前滚动位置

  14. 14

    获取事件处理程序中对React组件的引用

  15. 15

    在React的事件处理程序中获取组件的prop

  16. 16

    如何在另一个文件中获取组件的状态 react native

  17. 17

    如何在React Native中让组件控制同级组件?

  18. 18

    如何从React组件中的React函数获取价值

  19. 19

    如何覆盖React Native组件?

  20. 20

    如何使用React Native iOS将ListView放入ScrollView中?

  21. 21

    React Native-如何测量ScrollView中内容的大小?

  22. 22

    如何防止在 React-Native ScrollView 中滚动多个元素?

  23. 23

    React Native:组件上的onPress不起作用

  24. 24

    OnPress从循环更改组件样式-带钩子的React Native

  25. 25

    react-native-maps-多边形onPress事件

  26. 26

    如何从Angular的事件处理程序中获取组件实例?

  27. 27

    如何在Div组件的onclick事件中获取textnode

  28. 28

    如何确定哪个组件在React中触发事件处理程序?

  29. 29

    如何在React子组件中设置事件处理程序

热门标签

归档