How to get rid of blank space below a bottom tab navigator

Question

I'm trying to use a bottom tab navigator in my app. I don't want it to be on the bottom of the screen, so I've moved it up. But this causes there to leave a space below it. Could it be the ??

tabs.js

         <Tab.Navigator
                initialRouteName="Home"
                screenOptions={{
                    headerShown: false, 
                    tabBarHideOnKeyboard: true,
                    tabBarActiveTintColor: '#4d1635',
                    tabBarInactiveTintColor: '#5f7782',
                    elevation:1,
                    postion:'absolute',
                    
                    tabBarLabelStyle:{
                        fontSize:20,
                        fontFamily:'Ubuntu_400Regular',
                        shadowRadius:10,
                        shadowColor:'black',
                    },
                    tabBarStyle: {
                        alignSelf:'center',
                        elevation:1,
                        backgroundColor:'#f5f5f5',
                        height:55,
                        bottom:25,
                        borderRadius:20,
                        width:Dimensions.get('window').width/1.003,
                        opacity:0.95,
                        postion:'absolute',
                        shadowOffset: { width: 1, height: 4 },
                        
                        
                    },
                    
                }}
            >

home.js

<ImageBackground source={require('../../../assets/images/MainBG.jpeg')} blurRadius={2} resizeMode='cover'
            style={{height:Dimensions.get('window').height/0.91, flex:2, justifyContent:'center', marginBottom:-20,}}>

Answer 1

• 在 tabBarStyle 中，只需将bottom: 25 to 0即可摆脱空白