嵌套 ScrollView 在子项中开始滚动时阻止父滚动答案

【问题标题】：Nested ScrollView block parent scroll when started scrolling in child嵌套 ScrollView 在子项中开始滚动时阻止父滚动
【发布时间】：2022-11-06 06:51:32
【问题描述】：

我有一个带有父 ScrollView 组件的 React Native 应用程序，该组件包装了其他 2 个兄弟的 ScrollView。当我从子组件外部开始滚动时，如何强制父级仅滚动？

当前行为：

当我开始在孩子中滚动时，孩子会滚动，但是当列表到达末尾时，父母会开始滚动（手指没有从屏幕上移开，所以它是相同的滚动动作）。

期望的行为：

当我开始在孩子中滚动时，孩子会滚动，但是当列表到达末尾时，父母不会滚动，直到我中断当前的滚动动作并从父母的区域再次开始滚动。

【问题讨论】：

标签： react-native scrollview

【解决方案1】：

您不能在同一方向上嵌套滚动视图。您可以尝试改进 UI。即使对于用户来说，这也可能令人困惑。发送屏幕截图，以便人们更好地了解目标是什么。

【讨论】：

该设计很容易理解，因此不会令人困惑。我不能改变它，这不取决于我。
您可以尝试使用 scrollEnabled、onScrollBeginDrag 和 onScrollEndDrag 的组合。因此，您可以在使用另一个时禁用其中一个。

【解决方案2】：

export const ScrollEnabledContext = createContext(null);

const Parent = () => {
    const ref = useRef(null);

    const setIsEnabled = (bool) => {
        ref.current?.setNativeProps({ scrollEnabled: bool });
    };

    return (
        <ScrollEnabledContext.Provider nestedScrollEnabled={true} value={setIsEnabled}>
            <ScrollView ref={ref}>
                <ChildScrollView />
            </ScrollView>
        </ScrollEnabledContext.Provider>
    );
};

const ChildScrollView = () => {
    const value = useContext(ScrollEnabledContext);

    return (
        <ScrollView onTouchStart={() => value(false)} onTouchEnd={() => value(true)}>
            ....
        </ScrollView>
    );
};

【讨论】：