React Native - 在位于滚动视图上的视图中禁用滚动拖动检测（类似于停止传播）

Question

这是一个 React Native 问题。

我想要实现的是防止在用户拖动滚动视图的特定部分时触发滚动事件。

最小示例：

<View style={{ width: '100%', flex: 1 }}>
    <ScrollView>
        <View style={{ width: '100%', height: 1600, backgroundColor: 'red' }}>
            <View style={{ width: '100%', height: 600, backgroundColor: 'blue' }}/>
        </View>
    </ScrollView
</View>

如何禁用蓝色部分的拖动检测（滚动父scrollView）？

Answer 1

您可以使用 ScrollView 内的 onTouchStart 和 onTouchEnd 事件来解决问题。

这是您可以使用的代码，

constructor(props) {

            super(props);

            this.state = {
                enabled: true
            };
        }

        render() {

            return (

                <View style={{ width: '100%', flex: 1 }}>
                    <ScrollView
                        scrollEnabled={this.state.enabled}
                        onTouchStart={(event) => {
                            if (event.nativeEvent.locationY < 600) this.setState({ enabled: false });

                        }}
                        onTouchEnd={(event) => {
                            this.setState({ enabled: true });
                        }}
                        >
                        <View style={{ width: '100%', height: 1600, backgroundColor: 'red' }}>
                            <View style={{ width: '100%', height: 600, backgroundColor: 'blue' }}/>
                        </View>
                    </ScrollView>
                </View>

            );

        }

此代码仅根据您在屏幕上的触摸位置处理 scrollEnabled。如果您开始触摸蓝色区域，那么它应该会阻止滚动，一旦您松开手指，它就会移除阻止。

Answer 2

您可以使用 TouchableWithoutFeedback 组件包裹蓝色区域，并使用其 onPressIn 事件作为触发器来禁用 ScrollView 的滚动。在 ScrollView 上使用 onTouchEnd 事件再次启用可滚动性。

export default function MyComponent() {
  const [scrollEnabled, setScrollEnabled] = useState(true);
  return (
    <ScrollView scrollEnabled={scrollEnabled} onTouchEnd={() => { setScrollEnabled(true); }}>
      <View style={{ width: '100%', height: 1600, backgroundColor: 'red' }}>
        <TouchableWithoutFeedback onPressIn={() => { setScrollEnabled(false); }}>
          <View style={{ width: '100%', height: 600, backgroundColor: 'blue' }}/>
        </TouchableWithoutFeedback>
      </View>
    </ScrollView
  );
};

React Native - 在位于滚动视图上的视图中禁用滚动拖动检测（类似于停止传播）

React Native - Disable scroll drag detection in view that lays on a scrollview (similar to stop propagation)

react-native

react-native-android

react-native-ios