屏幕在底部材质选项卡栏后面

Question

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

黄色边框用于查看 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 以检查 希望能帮助到你。如有疑问，请随意