React Native：如何检查我们是否位于平面列表的末尾？

Question

我想当我已经位于列表末尾时隐藏视图，并且仅当我位于平面列表中间时才显示视图。我想知道如何检查列表末尾？

Answer 1

<FlatList
  onScroll={event => {
    const isAtAnd =
      event.nativeEvent.contentOffset.y + 
      event.nativeEvent.layoutMeasurement.height === event.nativeEvent.contentSize.height 
}}/>

Answer 2

您可以使用 onEndReached 来检查用户是否已到达 FlatList 的末尾。

<FlatList
   ...
   ...
   onEndReached={() => {
          this.setState({
             showText : true
         }}
/>

现在你可以做

showText ? <Text>New Message</Text>: null

Answer 3

借鉴 gobien 的答案，将

===

更改为

>=

以适应列表内容不超过 FlatList 布局高度的高度：

<FlatList
  onScroll={event => {
    const isAtEnd = event.nativeEvent.contentOffset.y + 
      event.nativeEvent.layoutMeasurement.height >= event.nativeEvent.contentSize.height;
  }}
/>