如何使用BottomTabBar反应导航中每个选项卡的自定义宽度？

Question

我正在使用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',


});

我有5个标签，我希望我的中心标签有更多的宽度，我也需要有每个边框，但我不知道该怎么做。

请帮我解决你的意见。

谢谢。

Answer 1

您始终可以创建自定义选项卡组件并自行完成：

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"
      }
    ]}
    />
  }
});

然后使用该项目的扩展道具来控制样式。这是我的TabNavigation：

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

       }

}

您需要为样式添加逻辑。