Question

我正在使用react-navigation v3实现身份验证流程，我希望图标和标签应显示在标签栏上。实施后，标签栏上的图标不会仅显示标签。

//Assigninig of TabBar Icon and Config..
const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;

  let iconName;
  if (routeName === "Explore") {
    iconName = `ios-heart${focused ? "" : "-empty"}`;
  } else if (routeName === "Inbox") {
    iconName = `ios-mail${focused ? "" : "-open"}`;
  }

  return <Icon name={iconName} size={24} color={tintColor} />;
};

//Creating a BottomTab
const AppTab = createBottomTabNavigator(
  {
    Explore: ExploreScreen,
    Inbox: InboxScreen

  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        getTabBarIcon(navigation, focused, tintColor);
      }
    })
  },
  {
    tabBarOptions: {
      activiTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

//Inserting BottomTab Navigation into StackNavigator
const AppStackNavigator = createStackNavigator({
  AppStack: AppTab
});

  //Compiling all Screens into SwitchNavigator
const NavigationConfig = createSwitchNavigator(
  {
    SplashScreen: SplashScreen,
    App: AppStackNavigator,
    Auth: AuthStack
  },
  {
    initialRouteName: "App"
  }
);

Answer 1

尝试

import Ionicons from 'react-native-vector-icons/Ionicons';

const AppTab = createBottomTabNavigator(
  {
    Explore: ExploreScreen,
    Inbox: InboxScreen

  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
         const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Explore") {
          iconName = `ios-heart${focused ? "" : "-empty"}`;
        } else if (routeName === "Inbox") {
          iconName = `ios-mail${focused ? "" : "-open"}`;
        }

         return <Ionicons name={iconName} size={24} color={tintColor} />;
      },
      }
    })
  },
  {
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

您在activeTintColor中有错字有关更多信息，请阅读here

Blockquote

Answer 2

您没有将组件返回给tabBarIcon prop，因此只需添加返回值即可解决Icon渲染问题。

  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        return getTabBarIcon(navigation, focused, tintColor);
      }
    })   
  }

react-native导航v3选项卡图标未显示

2 个答案: