反应原生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。

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