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

【问题标题】：React Native - Disable scroll drag detection in view that lays on a scrollview (similar to stop propagation)React Native - 在滚动视图上的视图中禁用滚动拖动检测（类似于停止传播）
【发布时间】：2019-08-07 07:14:41
【问题描述】：

这是一个 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）？

【问题讨论】：

标签： react-native react-native-android react-native-ios

【解决方案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。如果您开始触摸蓝色区域，那么它应该会阻止滚动，一旦您松开手指，它应该会消除阻塞。

【讨论】：

感谢您的快速回复，但是，当我查看 event.nativeEvent.locationY 时，我得到了一些奇怪的值。就像当我随机单击看起来在同一个y 的区域时，它会产生很大的变化范围，从像3 这样的非常小的值到像40 这样的更大的值......
但是，在这个最小的示例中，您的代码按预期工作。我猜这是由于位于蓝色区域的儿童（不包括在最小示例中）。无论如何，谢谢。
正常。如果用户触摸屏幕的blue 部分，您不想拖动吗？蓝色区域的区域在y 坐标处从0 延伸到600。这就是为什么我们查看 y 坐标并将其范围在 0 到 600 之间的原因。
在现实生活中的例子中，我在蓝色部分有一个平面列表，蓝色部分的高度也是 600px，但是，当我按下蓝色部分的区域时，event.nativeEvent.locationY 是给我奇怪的价值观。
现在说得通了。在您的真实代码中，flatlist 有自己的滚动条。当我试图回答您的问题时，我在想该区域没有其他滚动视图。希望它可以为您的实际项目提供一些想法。 @Andus

【解决方案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
  );
};

【讨论】：