时间戳

首页 > 解决方案 > Flatlist 覆盖具有绝对位置的 a 元素

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

问题描述

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

<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>

标签： react-nativereact-native-flatlist

解决方案

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

<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 覆盖具有绝对位置的 a 元素

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

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

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

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

推荐阅读