ReactNative 嵌套水平滚动视图（嵌套两次）答案

【问题标题】：ReactNative Nested Horizontal ScrollView ( nested twice)ReactNative 嵌套水平滚动视图（嵌套两次）
【发布时间】：2022-01-06 15:32:53
【问题描述】：

下面的视图结构

<ScrollView horizontal pagingEnabled>
    <View key={1}/>
    <View key={2}>
        <ScrollView horizontal={false} pagingEnabled>
            <View key={'2-0'}>
                <ScrollView horizontal pagingEnabled>{subviews here}</ScrollView>
            </View>
            <View key={'2-1'}/>
            <View key={'2-2'}/>
        </ScrollView>
    </View>
    <View key={3}/>
</ScrollView>

问题是，当我滚动到 view[key:2] 时，它的子视图现在是 view[key:'2-0']，然后由 view[key:'2-0 嵌套的滚动视图'] 将接管手势响应器，我永远不会有机会水平滑动到视图 [key:3] 或返回到视图 [key:1]。我试图将 onMoveShouldSetResponderCapture 设置为外部滚动视图以在内部滚动视图位于边缘时接管手势响应器。只有当我慢慢滑动时它才会起作用。有没有办法自然而然地完成这项工作？谢谢各位

【问题讨论】：

我无法想象这是在应用程序中的良好体验，即使它以您想要的方式工作。 React 警告你嵌套滚动视图是有原因的。
其实有一个产品叫tiktok。我上面描述的情况已经在这个应用程序中呈现出来了。它有三个选项卡（水平切换），每个选项卡包含一个垂直列表。在垂直列表中，有一个包含多张图片的水平列表。大声笑

标签： react-native scrollview react-native-flatlist nestedscrollview

【解决方案1】：

最后，我通过替换外部滚动视图解决了这个问题。我用 reanimated 和 react-native-gesture-handler 实现了 swpie-horizontally 视图。所以我可以完全控制外部的滚动动作。

【讨论】：

很高兴您找到了解决方案。但是由于您不将其发布为代码，因此其他人可能很难使用它。 -1