Render FlatList footer at the bottom of the list even if content is not enough

问题

I want to render FlatList's footer at the bottom of the page even if there is not enough content to fill the whole screen.

回答1:

In order to do this, you need to take a look at react-native sources. Here there is a code which shows adding footer internally. As you can see it wraps into additional View which can be styled using ListFooterComponentStyle prop. It's not described for some reason in docs.

So here is the solution:

 <FlatList
      data={someData}
      keyExtractor={item => item.id}
      contentContainerStyle={{flexGrow: 1}}
      ListFooterComponentStyle={{flex:1, justifyContent: 'flex-end'}}
      ListFooterComponent={<Footer/>}
 ...
 />

UPD: Update answer using AtlasRider's comment.

来源：https://stackoverflow.com/questions/55828675/render-flatlist-footer-at-the-bottom-of-the-list-even-if-content-is-not-enough