当嵌套子滚动视图滚动到其视图末尾时，如何防止*锁定*父滚动视图滚动？

Question

在react-native项目中，有一个父级平面列表/滚动视图。在此父列表中的每个项目内，都存在一个嵌套的滚动视图。

预期行为：当父滚动视图被锁定时，父滚动视图永远不应该滚动，只允许子滚动视图滚动。当满足子滚动视图的外部边界时（意味着您已滚动到子视图的底部或一直返回到子视图的顶部），父视图保持锁定状态

实际发生的情况：使用父视图滚动锁定，一旦子滚动视图到达其滚动边界，将子滚动视图滚动到最底部/顶部将滚动父滚动视图

重现行为的步骤：

1. 向下轻拂子滚动视图之一直到到达底部
2. （即使你已经到达了下方边界）尝试向下滚动子视图，
3. 观察父滚动视图现在滚动的事实，即使父滚动视图被锁定，

如何在嵌套时真正防止父滚动视图滚动 -滚动视图到达其视图的末尾？

只在 Android 上注意到这一点，但 iOS 上也可能存在。

这是一个最小的可重现示例： https://staging.snack.expo.dev/b3XuJ6iA3

Answer 1

您将多个 ScrollViews 嵌套在 FlatList 中，这是 ScrollView 的便捷包装器（与 文档) ，但您在子项中将 nestedScrollEnabled 设置为 true 滚动视图。您需要在父 ScrollView（FlatList）上设置它。

以下代码完全禁用父 FlatList 的滚动，同时允许在所有嵌套的 ScrollViews 中滚动。

const _renderItem = ({item, index}) => {
    return (
      <View style={{height: 300, borderColor: 'blue', borderWidth: 1, marginBottom: 20}}> 
        <Text> Non scroll View area </Text>
        <ScrollView contentContainerStyle={{height: 500, borderColor: 'red', borderWidth: 3}}></ScrollView>
      </View>
    )
  }
  return (
    <View style={styles.container}>
      <FlatList data={data} renderItem={_renderItem} scrollEnabled={false} nestedScrollEnabled={true}/>
    </View>
  );
}

这是代码的工作 snack ，其中包含上述更改，我已在 Android（三星 Galaxy S9）和 iOS（iPhone 12）上成功测试。