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

Question

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

Answer 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中图标的大小属性。请参考上面的代码。

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

How to set Icon size in react-native-navigation bottom tab bar

react-native

react-native-navigation