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
      }}>

尝试调整边距底部检查希望能帮助到你。毫无疑问

屏幕位于底部材料选项卡栏的后面

1 个答案: