Question

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

Click to check pic

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

如何在本机导航底部选项卡栏中设置图标大小

1 个答案: