React native 屏幕位于底部材质选项卡栏后面

嗨，我在屏幕上工作，其中包括底部选项卡栏。为此，我从“反应导航”的“材质底部选项卡”中实现了材质底部选项卡栏。问题是我的屏幕在底部标签后面，如下所示

黄色边框用于查看UI的外观。屏幕的底线应该在底部横杆的正上方，而不是后面

this.rectanglebarfunc（）}
高度={height*0.07}
矩形BarButtonText={'List Item 01'}
宽度={width}
color=“白色”
icolor=“#ff007C”
textColr=“#120F3F”
fontSize={16}
矩形函数={（）=>{}
/>
this.rectanglebarfunc（）}
高度={height*0.07}
矩形BarButtonText={'List Item 00'}
宽度={width}
color=“白色”
icolor=“#ff007C”
textColr=“#120F3F”
fontSize={16}
矩形函数={（）=>{}
/>
{/*  */}

尝试将边距底部添加到安全区域视图和视图：

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

试着调整你的边缘底部来检查 希望能有帮助。不要怀疑

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