Flatlist 覆盖具有绝对位置的 a 元素

Question

我试图创建一个视图，我想通过一个平面列表来显示，以便在单击它时用户可以到达顶部。但是平面列表覆盖了该元素。

<View style={{backgroundColor:'#e6e6e6',flex:1,}>
    <View style={{position:'absolute'}}>
        <Text>Scroll To Reload</Text>
    </View>
    <FlatList refreshing={this.state.refresh} onRefresh={()=>this.refreshAllTweets()}
        data={tweets}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) =>
        <TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)}
            onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
            />
</View>

Answer 1

视图中的每个孩子都按顺序渲染，并最终堆叠在一起，直到所有孩子都被渲染。由于您想要在顶部的视图首先被渲染，它将位于底部。更改您的代码，以便最后呈现您想要在顶部的视图。即将它移动到视图的底部。

<View style={{backgroundColor:'#e6e6e6',flex:1}}>
  <FlatList
    refreshing={this.state.refresh}
    onRefresh={()=>this.refreshAllTweets()}
    data={tweets}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({item}) => <TweetItem  onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
    />
  <View style={{position:'absolute', top: 0}}>
    <Text>Scroll To Reload</Text>
  </View>
</View>

由于视图现在是绝对定位的，您可能希望给它一个实际位置。

---

更新评论 Flatlist covering the a element with absolute position

FlatLast 有一个名为 ListFooterComponent 的 prop，它接受一个 React 组件类、一个渲染函数或一个渲染元素。因此，您可以通过添加以下道具来更新您的 FlatList。

<FlatList
  ...
  ListFooterComponent={ 
   <View>
     <Text>Scroll To Reload</Text>
   </View>
  }
/>

这会将视图作为页脚附加到 FlatList，因此当到达 FlatList 的底部时它将可见。

查看文档以获取有关 FlatLists 的更多信息。