Javascript 反应本机嵌套滚动视图锁定

我试图在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);

---

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

修改

节点\u模块/react native/Libraries/Components/ScrollResponder.js

：第136行（请参阅更新）：

scrollResponderHandleScrollShouldSetResponder:function（）：布尔值{
返回this.state.isTouching；
},

更新：我发现如果滚动视图当前正在制作动画，并且希望成为响应者，那么它将拒绝。ScrollResponder.js中的第189行。所以我修改了第340行，它对我有用：

滚动响应动画：函数（）：布尔值{ //var now=Date.now（）； //var timesineclastmentumscrollend=now-this.state.lastmentumscrollendtime； //var isAnimating=TimesInclastMomentUMScrollEnd<正在设置动画\u触摸\u开始\u阈值\u毫秒|| //this.state.lastmentumscrollendtime

---

您可以在此处看到：

在内部的panresponder中，尝试设置：

onPanResponderTerminationRequest: () => false

---

将嵌套ScrollView的可滚动内容包装为android上的固定内容：

...
{/*您的可滚动内容位于此处*/}

@IlyaDoroshin和@David Nathan的回答为我指明了正确的方向，但我必须在scrollview中用可触摸的图标来包装每个项目，而不是所有东西都可以触摸

<ScrollView>
  ...
  <ScrollView horizontal>
    {items.map(item => (
        <TouchableWithoutFeedback>
          { /* your scrollable content goes here */ }
        </TouchableWithoutFeedback>
    ))}
  </ScrollView>
</ScrollView>

...
{items.map（item=>(
{/*您的可滚动内容位于此处*/}
))}

如果您使用的是RN>56.0，只需将此道具添加到您的滚动视图中即可：

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

......
.....

---

---

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

你在模拟器中也看到这种行为吗？实际上，现在还不清楚你想在这里做什么——也许有一个更简单的方法。是的。也发生在模拟器中。我正在寻找的一个很好的例子是Gilt。您可以垂直滚动浏览产品，水平滚动浏览类别。另一个是Netflix，虽然反向，因为它们在一个垂直的卷轴中有多个水平卷轴。你找到解决方法了吗？我不想修改核心代码。经过一点调查，您可以在外部Scrollview上有一个返回true的函数，该函数响应以下事件onStartShouldSetResponder。因此，如果onStartShouldSetResponder设置为true，内部Scrollview将不会响应事件。因此，我们需要确定用户是否水平滑动，以及用户是否在onStartShouldSetResponder上水平滑动，让函数返回true，否则返回false。我只是想知道如何在onStartShouldSetResponder上得到这个手势。这对我来说就像一个符咒！！！！！！！非常感谢你！！！你是我的救命恩人！！！我收到这样一条错误消息：“警告：ScrollView不能很好地接受拒绝-无论如何滚动”。ScrollView似乎拥有特权，不必监听。还有其他选择吗？什么是panresponder？我们把那行代码放在哪里？@Yokhen你知道怎么设置吗？放在哪里？我也面临同样的问题。这对我没有帮助：（在RN 0.46上使用RN 0.40，仍然很有用。我还必须用一个视图包装我的内部内容，因为TWF只接受单个组件。非常好！工作非常完美！关于如何使用嵌套的Web视图工作，有什么想法吗？它看起来像一个滚动视图。谢谢。这是唯一对我有效的解决方案。我尝试了上面所有的解决方案。我有b我甚至花了好几个小时寻找这样的解决方案。嵌套滚动是iOS的默认设置。我不敢相信这个解决方案有多简单，或者我只是在这里找到的。无论如何，这太棒了。非常感谢！！天哪。我只花了大约两个小时浏览帖子，这太棒了。非常感谢。这太简单了，太疯狂了。非常感谢你，我在这种情况下，如果我滚动内部的一个，那么外部的一个也会滚动。有解决方案吗？

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