为什么这个 <Text> 组件被推到这个 react-native-draggable-flatlist 之下这么远？答案

【问题标题】：Why is this <Text> component pushed so far below this react-native-draggable-flatlist?为什么这个 <Text> 组件被推到这个 react-native-draggable-flatlist 之下这么远？
【发布时间】：2021-04-13 00:25:06
【问题描述】：

我想让这个 Text 组件立即跟随 react-native-draggable-flatlist (https://github.com/computerjazz/react-native-draggable-flatlist)。尽管设置了 flexGrow，但似乎仍有一些溢出影响周围的组件。

代码

https://snack.expo.io/@nicksinai/react-native-draggable-flatlist-flow-issue

错误

【问题讨论】：

看起来DraggableFlatList 占用了整个空间并忽略了任何height 属性，您可以将其传递给style 或contentContainerStyle。因此，尝试将其包装在 View 中，并为 View 提供固定高度
@Milore 有效。理想情况下，我想在列表下方保持可触摸的添加活动。我大概可以计算出所需的高度。
工作正常
这可能是一种方法，但这取决于您的目标：如果元素的数量使视图高于窗口怎么办？我认为“添加活动”按钮将被推到列表的最底部，窗外。
你仍然可以给它一个 maxHeight：windowHeight - （按钮高度 + 任何其他元素高度），但是......取决于你

标签： javascript css reactjs react-native flexbox

【解决方案1】：

一种解决方案是将 react-native-draggable-flatlist 包装在

https://snack.expo.io/@nicksinai/react-native-draggable-flatlist-flow-solution

【讨论】：

虽然给出了这个错误：“VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 请改用另一个 VirtualizedList-backed 容器。”