React Native嵌套ScrollView锁定 [英] React Native nested ScrollView locking up

问题描述

我正在尝试在React Native中嵌套ScrollViews;带有嵌套垂直滚动的水平滚动。

I'm trying to nest ScrollViews in React Native; a horizontal scroll with nested vertical scrolls.

以下是一个例子：

var Test = React.createClass({
    render: function() {
        return (
            <ScrollView
                style={{width:320, height:568}}
                horizontal={true}
                pagingEnabled={true}>

                {times(3, (i) => {
                    return (
                        <View style={{width:320, height:568}}>

                            <ScrollView>
                                {times(20, (j) => {
                                    return (
                                        <View style={{width:320, height:100, backgroundColor:randomColor()}}/>
                                    );
                                })}
                            </ScrollView>

                        </View>
                    );
                })}

            </ScrollView>
        );
    },
});

AppRegistry.registerComponent('MyApp', () => Test);

外部卷轴可以完美地工作，但是当它在移动时触摸它时，内部卷轴会粘住。我的意思是：如果你滚动，抬起你的手指，当它仍然以动量移动时再次触摸它，它停止并且根本不会对触摸动作做出反应。要滚动更多，您必须抬起手指再次触摸。

The outer scroller works flawlessly, but the inner one sticks when you touch it while it's moving. What I mean is: if you scroll, lift your finger and touch it again while it's still moving with momentum, it stops and doesn't react at all to touch moves. To scroll more you have to lift your finger and touch again.

这是如此可重复，感觉与手势响应器有关。

This is so reproducible it feels like something to do with the Gesture Responder.

有没有人见过这个问题？

Has anyone seen this issue?

我怎么会开始调试这个？有没有办法看到什么响应触摸，授予和释放，何时？

How would I even begin to debug this? Is there a way to see what's responding to touches, granting and releasing, and when?

谢谢。

更新：

通过将 onResponderMove 听众放入，看起来它是响应者系统在内部和外部滚动条上：

It looks like it is the responder system, by putting onResponderMove listeners on the inner and outer scrollers:

<ScrollView 
    onResponderMove={()=>{console.log('outer responding');}}
    ...

    <ScrollView
        onResponderMove={()=>{console.log('inner responding');}}>
        ...

很明显外部ScrollView正在抓住控制权。我想，问题是如何在尝试垂直滚动时阻止外部滚动条控制？为什么只有在您尝试滚动已经移动的内部ScrollView时才会发生这种情况？

It's clear that the outer ScrollView is grabbing control. The question, I guess, is how do I stop the outer scroller from taking control when trying to scroll vertically? And why is this only happening when you try to scroll an already moving inner ScrollView?

推荐答案

在内部响应器中，尝试设置：

In your panresponder for the inner one, try setting this:

onPanResponderTerminationRequest: () => false

这篇关于React Native嵌套ScrollView锁定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！