如何在 react-native-navigation 底部标签栏中设置图标大小答案

【问题标题】：How to set Icon size in react-native-navigation bottom tab bar如何在 react-native-navigation 底部标签栏中设置图标大小
【发布时间】：2020-03-03 15:23:05
【问题描述】：

我刚开始学习 RN，但https://reactnavigation.org/docs/tab-based-navigation/ 中的文档没有显示如何设置 tabBarIcon 的大小，我尝试在图片中添加一个属性。如果我手动设置 size={38}，它可以工作。但是，如果有更好的方法来设置全局大小，这意味着我只需要更改一个 var 即可设置整个图标大小

Click to check pic

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

 <Tab.Navigator
  initialRouteName="Home"
  activeColor="#ff0071"
  inactiveColor="#000"
  barStyle={{backgroundColor: '#fff'}}
  screenOptions={({route, navigation}) => ({
    tabBarLabel: navigation.isFocused() ? route.name : '',
    tabBarIcon: ({focused, color, size}) => {
      let iconName;
      if (route.name === 'Home') {
        iconName = focused ? 'home' : 'home';
      } else if (route.name === 'Favorite') {
        iconName = focused ? 'heart' : 'heart-o';
      } else if (route.name === 'Medium') {
        iconName = focused ? 'heart' : 'heart-o';
      } else if (route.name === 'Hard') {
        iconName = focused ? 'cog' : 'cog';
      }
      return <Icon name={iconName} size={23} color={color} />;
    },
  })}>

该解决方案基于 React Navigation 5。在 screenOptions 中，您可以在 tabBarIcon 属性中指定图标的大小。请参考上面的代码。

【讨论】：

非常感谢，它帮我解决了问题。