React Native：如何确定组件是否在视口中

Question

据说有一个很长的ScrollView包含很多内容，页面底部还有另一个组件。当用户向下滚动时，我正在尝试延迟渲染底部组件。有没有图书馆实现过这个？

（我知道ListView的onEndReached，但不太确定这对这种情况是否有用。）

感谢是否有人可以指导我。

Answer 1

将它放在ScrollView的末尾？

ScrollViews默认执行此操作：

  

removeClippedSubviews bool

     

实验：如果为true，则在屏幕外时，屏幕外的子视图（其溢出值被隐藏）将从其原生支持超级视图中删除。这可以改善长列表上的滚动性能。默认值为true。

https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews

Answer 2

我为此创建了一个简单的lib：

https://github.com/chunghe/react-native-defer-renderer

基本上你可以从onScroll（ScrollView）的e.nativeEvent.contentOffset事件获得滚动位置，将滚动位置传递给子组件。然后在子组件中，您可以从onLayout事件（e.nativeEvent.layout.y）的顶部获得距离。 这几乎就是所有技巧。