react-native - 如何更改 createBottomTabNavigator 的高度和位置

Question

我的项目上有一个 createBottomTabNavigator。默认情况下，选项卡具有特定的高度和底部位置。如何更改代码的位置和高度：

const Navigate=createBottomTabNavigator({
    Home:{screen:Home,navigationOptions:{  
          tabBarLabel:'Home',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="md-home" color={tintColor} size={25}/>  
          )  
        }  },
    Camera:{screen:Camera,navigationOptions:{  
          tabBarLabel:'Profile',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="md-add-circle" color={tintColor} size={25}/>  
          )  
        } },
     Profile: {  
        screen:Profile,  
        navigationOptions:{  
          tabBarLabel:'Profile',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="md-person" color={tintColor} size={25}/>  
          )  
        }  
      },
}
,{
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'cyan',
      activeBackgroundColor:'lightgreen',
      showLabel:false,
      keyboardHidesTabBar:false,
      tabStyle:{
            backgroundColor:'orange',
            height:40,
      },
    },
  },
  },
);

导出默认 createAppContainer(Navigate);

Answer 1

您需要在样式对象中设置高度，而不是 tabBarOptions。有关样式对象，请参阅https://reactnavigation.org/docs/en/bottom-tab-navigator.html。

我在我的应用程序中这样做了

const navigatorConfig = {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
switch (routeName) {
....
  }
style: {
  height: responsiveHeight(7.5),
  borderTopWidth: 0,
},
}}
enter code here