Что такое заполнение констант для 3 нижних кнопок устройства в React Native?

Question

Я клонирую часть мобильного приложения Instagram для изучения React Native.

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

Затем, после некоторого исследования, я понял, что должен добавить paddingTop: Constants.statusBarHeight к моему App компоненту, и это исправлено.

Но потом, когда дело касалось нижней части, я не смог найти Constants для нижних навигационных кнопок. Как и на рисунке ниже, последний пост моего NewsFeed потерял часть подсчета лайков. Я пытался найти Constants, чтобы сделать технику заполнения так же, как и выше для нижней части, но не смог найти, кто-нибудь может помочь?

Answer 1

Я не знаю почему, но добавление flex: 1 в контейнер решило проблему (большая часть нижней части больше не теряется). Общий код в App.js будет:

import React from "react"
import { StyleSheet, View } from "react-native"
import Constants from "expo-constants"
import Header from "./components/Header"
import Feed from "./components/Feed"
import FeedData from "./mock-data/FeedData"

const App = () => {
  return (
    <View style={styles.container}>
      <Header />
      <Feed feedData={FeedData}/>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1
  },
})

export default App

Результат снимка экрана: