如何在子ScrollView滚动时禁用父ScrollView？

可以实现子ScrollView滚动时禁用父ScrollView滚动，核心是通过监听子ScrollView的滚动状态，动态控制父ScrollView的scrollEnabled属性。

具体实现步骤： #

1. 给父ScrollView添加Ref
   通过useRef获取父ScrollView的引用，方便后续修改它的滚动状态：

   import { useRef } from 'react';
   import { ScrollView } from 'react-native';
   
   function YourComponent() {
     const parentScrollRef = useRef(null);
   
     return (
       <ScrollView 
         ref={parentScrollRef}
         nestedScrollEnabled={true}
       >
         {/* 子ScrollView及其他内容 */}
       </ScrollView>
     );
   }
   

2. 监听子ScrollView的滚动事件
   在子ScrollView的onScroll事件中，判断当前滚动位置是否处于可滚动区间（未触顶或触底），动态切换父ScrollView的滚动权限：

   <ScrollView
     nestedScrollEnabled={true}
     onScroll={(e) => {
       const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
       // 判断子ScrollView是否还能继续滚动（未到顶部/底部）
       const childCanScroll = contentOffset.y > 0 && 
         contentOffset.y < contentSize.height - layoutMeasurement.height;
   
       // 子可滚动时禁用父滚动，否则恢复
       if (parentScrollRef.current) {
         parentScrollRef.current.setNativeProps({
           scrollEnabled: !childCanScroll
         });
       }
     }}
     scrollEventThrottle={16} // 控制事件触发频率，提升流畅度
   >
     {/* 子ScrollView的内容 */}
   </ScrollView>
   

补充说明： #

• scrollEventThrottle={16}设置为16ms，让事件触发频率接近60fps，避免滚动时出现卡顿
• 使用setNativeProps直接修改原生属性，比通过React状态控制更高效流畅
• 若存在多层嵌套（如孙子ScrollView），可复用该逻辑，监听最内层滚动状态来控制所有外层ScrollView的滚动权限

内容的提问来源于stack exchange，提问作者cak3_lover