Как исправить перекрытие последнего элемента?

Question

[pcdesign]

Вот снэк:
https://snack.expo.io/@aimodding/overlay

Я там просто сгенерил 20 строк:
const items = Array.from({length:20},(v,k)=>k+1);

И вот что получаю:



20-ый элемент спрятался под "подвалом".

Answer 1

[Сергей Пантелеев]

Добавьте отсутуп к списку на высоту подвала

<FlatList
    style={{ backgroundColor: background, marginBottom: 60 }}
>
...
</FlatList>

Comments

[pcdesign]

Спасибо за ответ.
А это число 60, оно будет корректно работать на любом экране? На горизонтальном, на вертикальном, на планшете и т.д.?

[Сергей Пантелеев]

pcdesign, в вашем примере да, высота футера 56 всегда, но можете, например, сделать так

<Appbar style={styles.bottom} onLayout={(event) => {
        const {height} = event.nativeEvent.layout;
        // пробросить этот height в margin
      }}>
...
</Appbar>

Answer 2

[zlends]

Нет, отступы удалять не стоит, так как переиспользовать потом в будущем будет сложнее если вынести список как отдельный компонент.
Уберите position: 'absolute' и все станет хорошо, он встанет ровно под списком.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bottom: {
   position: 'absolute', // <-- удалите эту строку
    left: 0,
    right: 0,
    bottom: 0,
  },
});