React Native 将固定组件放在 Flatlist 之上答案

【问题标题】：React Native Putting Fixed Component on top of FlatlistReact Native 将固定组件放在 Flatlist 之上
【发布时间】：2017-07-12 14:18:09
【问题描述】：

如上所示，我想创建这个由两部分组成的屏幕，在这里我可以单击此处提供的第一个视图上的 A 组件和 B 组件。当用户滚动 B 组件时，它可能会占据整个屏幕并在 A 组件上移动。（组件不随 FlatList 移动）。

我是原生反应新手，想知道如何创建这样的行为？我尝试在 FlatList 中使用绝对定位和 ListHeaderComponent 但并没有真正到达任何地方。如果有人有想法，请告诉我。

谢谢！

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

我会尝试以下屏幕结构：

View
  Image
  ScrollView w/ trans background that goes to the top of screen
    FlatList with top padding to push it below the image
      Items in list
    /FlatList
  /ScrollView
/View

您还可以查看 react-native-parallax-scroll-view 是否适合您，因为它看起来与您描述的有点相似

https://github.com/jaysoo/react-native-parallax-scroll-view

【讨论】：

感谢 Garret，这似乎可以在视觉上起作用。我唯一担心的是在这个结构中是不可点击的。此外，Flatlist 组件在滚动视图中时的行为如何？我了解 flatlist 在列表中异步创建其项目，而 scrollview 必须等待其所有子项显示。 scrollview + flatlist 的行为是否与 flatlist 一样快？我将研究视差。
我不知道在 ScrollView 中使用 FlatList 有什么问题。 ScrollView 现在能够剪辑不在视口中的子视图，所以我不希望出现任何性能问题，但值得测试。除了 ScrollView，您还可以尝试在 FlatList 中使用具有固定高度的透明标题
@GarrettMcCullough 将FlatList 嵌套在ScrollView 中的一个问题是它总是认为你已经走到了尽头并反复触发onEndReached。