Как я могу прикрепить ListFooterComponent к нижней части экрана?

Question

У меня есть компонент FlatList, состоящий из 3 секций:

<View style={{ flex: 1 }}>
    <FlatList
        ListHeaderComponent={Comp1}
        ListFooterComponent={<Comp2 style={{ flexGrow: 1, justifyContent: 'flex-end' }}/>}
        renderItem={Comp3}
        contentContainerStyle={{ flexGrow: 1 }}
    />
</View>

По умолчанию ListFooterComponent будет отображаться сразу после ListHeaderComponent, если data.length равно 0. Мне нужночтобы все время рендерить его внизу.

Один из найденных мной обходных путей - предоставить пустое представление для ListEmptyComponent.В этом случае он выглядит нормально, пока я не добавлю хотя бы один элемент, а затем снова прилипнет к верху.

Можно ли по умолчанию прикрепить ListFooterComponent к низу?

Синий цвет - FlatList, красный - ListFooterComponent

Answer 1

Если он должен постоянно находиться внизу экрана, вы можете обернуть отдельные части в ScrollView

  render() {

    return (
      <ScrollView style={{flex: 1}}>
        <Comp1/>
        <FlatList
          style={{flex: 1}}
          renderItem={Comp3}
        />
        <Comp2/>
      </ScrollView>
    );
  }