当嵌套 child scroll-view 滚动到其视图末尾时，如何防止 *locked* parent scroll-view 滚动？

Question

在一个react-native项目中，有一个parentflatlist/scrollview。在这个 parent 列表的每个项目中，都有一个嵌套的滚动视图。

预期行为：当 parent 滚动视图被锁定时，parent 永远不会滚动，只有 child 滚动视图可以滚动。当 child 滚动视图的外部边界被满足时（意味着你已经滚动到底部或一直滚动到 child 视图的顶部），parent 仍然是 锁定

实际发生了什么：使用 parent 视图 scroll-locked，将 child 滚动视图滚动到 bottom/top 将滚动 parent 滚动视图，一次child 滚动视图达到 scroll-boundary

重现行为的步骤：

1. 向下滑动 child 滚动视图之一，直到到达底部
2. （即使您已到达向下边界）尝试进一步向下滚动 child
3. 观察 parent 滚动视图现在改为滚动，即使 parent 滚动视图 已锁定

当nested-scroll-view到达其视图末尾时，如何真正防止parent滚动视图滚动？

只在 android 上注意到了这一点，但在 ios 上也可能存在。

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

Answer 1

您在 FlatList 中嵌套了多个 ScrollViews，这是 ScrollView 的便利包装（与 the documentation 相比），但您设置的是 nestedScrolEnabled 在 child ScrollViews 中为真。您需要在 parent ScrollView (FlatList) 上设置它。

以下代码完全禁用 parent 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 (Samsung Galaxy S9) 和 iOS (iPhone 上成功测试的上述更改12).