Как я могу переместить компонент, основанный на плоском списке ниже, в нижнюю часть экрана?

Question

Всем. Я собираюсь сделать один экран (вверху: flatList, внизу: какой-то компонент), но компонент должен быть расположен внизу экрана. Я пробовал несколько раз вот так, но не смог.

Устал: стиль нижнего компонента:

   position: 'absolute',
   bottom: 0,
   padding: 20,

Но у меня не работает, и этот компонент просто скрыт. Я не уверен, почему это произошло.

Пожалуйста, помогите мне ... Спасибо

введите описание изображения здесь

Answer 1

Вы можете сделать что-то подобное. Плоский список будет прокручиваемым, вы можете разместить вид сверху или снизу в зависимости от ваших требований.

// data = ['aa', 'bb', 'cc']

 <View style={{ flex: 1 }}>
      <View style={{ backgroundColor: 'blue', height: 100, width: '100%' }} />
      <FlatList
        style={{ flexGrow: 0 }}
        renderItem={({ item }) => (
          <Text style={{ height: 100 }}>{item}</Text>
        )}
        data={data}
      />
      <View
        style={{
          backgroundColor: 'red',
          height: 100,
          width: '100%',
          marginTop: 'auto',
        }}
      />
    </View>

Explanation: flexGrow: 0 гарантирует, что плоский список будет использовать только доступное пространство, иначе он будет увеличиваться и занимать весь экран. marginTop: 'auto' переместит представление в нижнюю часть, это также работает для marginLeft и marginRight, что может помочь при перемещении элемента в углы. Таким образом, вид внизу будет иметь высоту: 100 и полную ширину и перемещаться вниз, а плоский список займет все остальное.

Результат будет таким, как показано ниже введите описание изображения здесь

Answer 2

Вы имеете в виду что-то подобное?

<View style={{ flex: 1 }}>
   <FlatList 
      style={{ flex: 1, .... }}
      ...
   />
   <SomeComponent style={{height:80, width:'100%'}}>
      ...
   </SomeComponent>
</View>