React Native ScrollView 粘滞视图元素

Question

我试图让滚动视图中的元素始终保持在屏幕的左侧。有点像 Excel 中的数字行。它们在水平滚动时停留在左侧，但在垂直滚动时也会向下滚动。到目前为止，我尝试通过将 onscroll 元素连接到它来为元素设置动画。它确实有效，但感觉非常不稳定。它速度快但不流畅。几乎看起来元素在振动。

是否有任何其他技术可以在本机反应中获得所需的结果？这是我正在使用的重要行。

scrollPositionX: new Animated.Value(0),    

scrollEventThrottle={16}
onScroll={Animated.event([{nativeEvent: {contentOffset: {x: this.state.scrollPositionX}}}] )}

<Animated.View style={[styles.times, {
     transform: [{translateX: this.state.scrollPositionX}]
}]}>
   ...
</Animated.View>

Answer 1

一种粗略的方法是在水平 ScrollView 之外渲染粘性列。只需确保您的粘性和非粘性细胞最终高度相同，以便所有内容都对齐。

如果您也想垂直滚动，请将它们都包裹在另一个 ScrollView 中。

<ScrollView>
  <View>
    // render the sticky cells
  </View>
  <ScrollView horizontal={true}>
    // render the non sticky cells
  </ScrollView>
</ScrollView>

问题在于，如果您有很多行，尤其是其中包含更复杂的组件，则会出现性能问题。

ListViews 更擅长处理大量数据，但我还没有找到一种方法来在这种情况下使用它们。粘性列和普通单元格都需要一个，如果不观看 onScroll 就无法使它们保持同步。

我希望有人有更好的方法来做到这一点。我也确实需要这个功能。