React native 如何为底部选项卡栏导航中的每个选项卡使用自定义宽度？

我正在使用react navigation V3，我的应用程序中有一个底部选项卡导航 详情如下:

export default createBottomTabNavigator({
profile: {
    screen: ProfileUser,
    navigationOptions:{
      title : 'Profile',          
    }  
  },
  leaderboard :{
      screen : Leaderboard,
      navigationOptions:{          
      title : 'Leaderboard',       
    } 
  },
home :{
      screen : Homeboard, 
      navigationOptions:{
        title : 'Home',
        tabBarIcon: ({tintColor}) => (
          <BattleTabIcon              
              width={30}
              height={30}
          />
        ),        
      },  
  },
  store :{
      screen : AppStore,
      navigationOptions:{
        title : 'Store',
      }           
  },
  setting :{
    screen : Settings,
    navigationOptions:{
      title : 'Setting',     
    }           
},
},{
  tabBarOptions: {
      scrollEnabled : true,
      upperCaseLabel: false,
      activeTintColor: '#fff',
      activeBackgroundColor :'#1f1f3c',
      inactiveTintColor: '#8583a9',
      showLabel: false,
      style: {          
          backgroundColor: '#131332',
          height: 50,
          borderTopWidth: 2,
          borderTopColor: '#aeaeae',                      
      },      
      labelStyle: {
          fontSize: 12,
          fontFamily : 'Questrial-Regular',
          marginBottom: 5
      },
  },
  initialRouteName : 'home',


});

导出默认CreateBoottomTabNavigator({
简介：{
屏幕：ProfileUser，
导航选项：{
标题：“个人资料”，
}  
},
排行榜：{
屏幕：排行榜，
导航选项：{
标题：“排行榜”，
} 
},
主页：{
屏幕：Homeboard，
导航选项：{
标题:"家",，
tabBarIcon:（{tintColor}）=>(
),        
},  
},
商店：{
屏幕：AppStore，
导航选项：{
标题：“商店”，
}           
},
设置：{
屏幕：设置，
导航选项：{
标题：“设置”，
}           
},
},{
选项卡选项：{
scrollEnabled:true，
大写标签：false，
activeTintColor:“#fff”，
activeBackgroundColor:“#1f3c”，
InactiveIntColor:“#8583a9”，
showLabel:false，
样式：{
背景颜色：“#131332”，
身高：50，
边框宽度：2，
边框颜色：“#aeaeae”，
},      
标签样式：{
尺寸：12，
fontFamily:“Questrial Regular”，
marginBottom:5
},
},
initialRouteName:“主页”，
});

我有5个标签，我想有更多的宽度为我的中心标签，我也需要有每个边框上，但我不知道如何做到这一点

请帮我提建议

---

谢谢。

您始终可以创建一个自定义选项卡组件，然后自己创建：

const MainTabNavigator = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Tab2: {
    screen: EmptyTab,
  },
  Tab3: {
    screen: EmptyTab,
  }
}, {
  initialRouteName: 'Home',
  tabBarPosition: "bottom",
  tabBarComponent: props => {
    return <TabNavigation {...props}
    items={[
      {
        text: "Home", icon: { name: "home", type: "Entypo" },
        route: "Home"
      },
      {
        text: "Tab2", icon: { name: "data-usage", type: "MaterialIcons" },
        route: "Tab2",
        expand: true
      },
      {
        text: "Tab3", icon: { name: "package", type: "Octicons" },
        route: "Tab3"
      }
    ]}
    />
  }
});

const MainTabNavigator=TabNavigator({
主页：{
屏幕：主屏幕，
},
表2：{
屏幕：清空选项卡，
},
表3：{
屏幕：清空选项卡，
}
}, {
initialRouteName:“主页”，
tabbar位置：“底部”，
tabBarComponent:props=>{
返回
}
});

然后使用该项目的展开道具来控制样式。这是我的标签导航：

class TabNavigation extends React.PureComponent {

    route = (route) => {
        this.props.navigation.navigate(route);
    }

    render(){

        let tabs = this.props.items.map((item, index) => {

            let active = ((this.props.navigationState && this.props.navigationState.index === index) || (this.props.navigation && this.props.navigation.state && this.props.navigation.state.index === index));

            let icon, text = null;

            if (item.icon){
                let iconStyle = {
                    color: active ? this.props.theme.navBarTextColorActive : this.props.theme.navBarTextColor,
                    size: 23
                };

                if (item.icon.size)
                    iconStyle.fontSize = item.icon.size;
                if (item.icon.color)
                    iconStyle.color = item.icon.color;

                icon = this.props.getIcon(item.icon.type, item.icon.name, iconStyle.size, iconStyle.color);
            }

            if (item.text)
                text =  <Text active={active}>{item.text}</Text>;

            return (<TouchableOpacity key={index} onPress={() => this.route(item.route)} style={{flex: 1}}>
                    <View style={styles.buttonWrapper}>
                        {icon}
                        {text}
                    </View>
                </TouchableOpacity>)

        });

        if (tabs.length == 0)
        return null;
        else
        return (<NavBar>{tabs}</NavBar>)

       }

}

类选项卡导航扩展了React.PureComponent{
路线=（路线）=>{
这个。道具。导航。导航（路线）；
}
render（）{
让tabs=this.props.items.map（（项目，索引）=>{
让活动=（（this.props.navigationState&&this.props.navigationState.index==index）| |（this.props.navigation&&this.props.navigation.state&&this.props.navigation.state.index==index））；
让图标，文本=空；
如果（项目图标）{
设iconStyle={
颜色：活动？this.props.theme.navbertextcolor活动：this.props.theme.navbertextcolor，
尺码：23
};
如果（项目.图标.大小）
iconStyle.fontSize=item.icon.size；
if（项目.图标.颜色）
iconStyle.color=item.icon.color；
icon=this.props.getIcon（item.icon.type、item.icon.name、iconStyle.size、iconStyle.color）；
}
如果（项目文本）
text={item.text}；
return（this.route（item.route）}style={{{flex:1}}>
{icon}
{text}
)
});
如果（tabs.length==0）
返回null；
其他的
返回（{tabs}）
}
}

您需要在那里为样式添加逻辑