react-native - 屏幕位于底部 Material 选项卡栏后面

Question

您好，我正在处理涉及底部标签栏的屏幕。为此，我已经从react-navigation-material-bottom-tabs实现了 Material 底部选项卡栏。问题是我的屏幕位于底部选项卡后面，如下所示

黄色边框是为了查看 UI 的外观而设计的。屏幕的底线预计位于底部栏的正上方，而不是其后面。

<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 来检查 希望能帮助到你。如有疑问请放心