React Native FlatList - Как я могу оставить место для кнопки внизу?

Question

Я одна неделя в React Native и пытаюсь поместить кнопку внизу FlatList.

У меня FlatList работает должным образом, но если я поставлю свою кнопку, как приведенный ниже (очень упрощенный) псевдокод, то он появится справа внизу всех элементов в FlatList.

Я хочу, чтобы кнопка всегда находилась внизу экрана, а FlatList прокручивался над ней.

Я думаю, мне может понадобиться контейнер для переноса, а затем установить flex на FlatList иКнопка, но я не могу туда добраться.

<Container>

  <Content>
      <FlatList
          ...working FlatList goes here...
      />

      <Button block onPress={() => Actions.filters()}>
        <Text>Filter results</Text>
    </Button>

  </Content>        

В целях краткости я убрал все атрибуты из FlatList, но это работает, а не проблема.Я просто хочу приклеить эту кнопку к нижней части экрана, чтобы она оставалась там.

Какой лучший подход для этого?

Answer 1

FlatList теперь предоставляет ListFooterComponent

https://facebook.github.io/react-native/docs/flatlist#listfootercomponent

Answer 2

Вы можете использовать один вид для FlatList и один для Button, например:

<Container>

    <Content>
        <View style={{flex: 3}}>
            <FlatList
                ...working FlatList goes here...
            />
        </View>
        <View style={{flex: 1}}
            <Button block onPress={() => Actions.filters()}>
                <Text>Filter results</Text>
            </Button>
        </View>

    </Content>