Экран идет за нижней панелью вкладок материала

Question

Привет, я работаю на экранах, которые включают нижнюю панель вкладок. Для этого я реализовал нижнюю панель вкладок материала из response-navigation-material-bottom-tabs . Проблема в том, что мой экран находится за нижней вкладкой, как показано ниже

Желтая рамка была указана, чтобы увидеть, как будет выглядеть пользовательский интерфейс. Ожидается, что нижняя линия экрана будет чуть выше нижней полосы, а не за ней.

<SafeAreaView style={{backgroundColor: '#f3f3f5'}}>
    <View
      style={{
        borderWidth: 3,
        borderColor: 'yellow',
        width: width,
        height: height,
        flexDirection: 'column-reverse',
      }}>
      <Header data={headerData} />
      <LabelledView
        rectanglebarfunc={() => this.rectanglebarfunc()}
        height={height * 0.07}
        rectanglebarbuttontext={'List Item 01'}
        width={width}
        color="white"
        icolor="#ff007C"
        textColr="#120F3F"
        fontSize={16}
        rectanglebarfunc={() => {}}
      />
      <View
        style={{
          width: '100%',
          height: 0.5,
          backgroundColor: 'transparent',
        }}
      />
      <LabelledView
        rectanglebarfunc={() => this.rectanglebarfunc()}
        height={height * 0.07}
        rectanglebarbuttontext={'List Item 00'}
        width={width}
        color="white"
        icolor="#ff007C"
        textColr="#120F3F"
        fontSize={16}
        rectanglebarfunc={() => {}}
      />

      {/* <View
        style={{
          width: '90%',
          height: '70%',
          backgroundColor: 'red',
          alignSelf: 'center',
          marginVertical: 5,
        }}></View> */}
    </View>
  </SafeAreaView>

Answer 1

Попробуйте добавить marginBottom к safeAreaView и View:

<SafeAreaView style={{backgroundColor: '#f3f3f5' ,marginBottom:100}}>
    <View
      style={{
        borderWidth: 3,
        borderColor: 'yellow',
        width: width,
        height: height,
        flexDirection: 'column-reverse',
      marginBottom:100
      }}>

попробуйте настроить marginBottom, чтобы проверить Надеюсь, это поможет. не стесняйтесь сомнений