javascript - React Native 嵌套的 ScrollView 锁定

Question

我正在尝试在 React Native 中嵌套 ScrollView；带有嵌套垂直卷轴的水平卷轴。

这是一个例子:

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);

外部滚动条工作完美，但当您在移动时触摸内部滚动条时它会粘住。我的意思是:如果你滚动，抬起你的手指并在它仍然以动量移动时再次触摸它，它会停止并且根本不会对触摸移动使用react。要滚动更多，您必须抬起手指并再次触摸。

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

有人见过这个问题吗？

我什至要如何开始调试它？有没有办法查看什么在响应触摸、授予和释放以及何时响应？

谢谢。

更新:

它看起来像是响应系统，通过将 onResponderMove 监听器放在内部和外部滚动条上:

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

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

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

Answer 1

如果你使用的是 RN > 56.0，只需将这个属性添加到你的 ScrollView 中:

<ScrollView nestedScrollEnabled = {true}>
 ......
  <ScrollView nestedScrollEnabled = {true}>
    .....
  </ScrollView>
</ScrollView>

这是唯一对我有用的方法。