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的道具，它需要一个React Component类，一个渲染函数或一个渲染元素。因此，您可以通过添加以下道具来更新FlatList。

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

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

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

包含绝对位置的元素的平面表

1 个答案: