React native 反应本机导航v3选项卡图标不显示

我正在用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"
  }
);

//选项卡图标和配置的分配。。
常量getTabaricon=（导航、聚焦、着色）=>{
const{routeName}=navigation.state；
让我来；
如果（routeName==“探索”）{
iconName=`ios heart${focused？”：“-empty”}`；
}else if（routeName==“收件箱”）{
iconName=`ios邮件${focused？”：“-open”}`；
}
返回；
};
//创建底部选项卡
const AppTab=createBottomTabNavigator(
{
探索：探索屏幕，
收件箱：收件箱屏幕
},
{
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
GetTabaricon（导航、聚焦、着色）；
}
})
},
{
选项卡选项：{
颜色：“西红柿”，
颜色：“灰色”
}
}
);
//将底部选项卡导航插入StackNavigator
const AppStackNavigator=createStackNavigator({
AppStack:AppTab
});
//将所有屏幕编译为SwitchNavigator
const NavigationConfig=createSwitchNavigator(
{
SplashScreen:SplashScreen，
应用程序：AppStackNavigator，
Auth:AuthStack
},
{
initialRouteName:“应用程序”
}
);

尝试使用

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

从'react native vector icons/Ionicons'导入离子图标；
const AppTab=createBottomTabNavigator(
{
探索：探索屏幕，
收件箱：收件箱屏幕
},
{
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
如果（routeName==“探索”）{
iconName=`ios heart${focused？”：“-empty”}`；
}else if（routeName==“收件箱”）{
iconName=`ios邮件${focused？”：“-open”}`；
}
返回；
},
}
})
},
{
选项卡选项：{
activeTintColor:“番茄”，
颜色：“灰色”
}
}
);

您在activeTintColor中有输入错误 更多阅读

Blockquote

尝试使用

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

从'react native vector icons/Ionicons'导入离子图标；
const AppTab=createBottomTabNavigator(
{
探索：探索屏幕，
收件箱：收件箱屏幕
},
{
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
如果（routeName==“探索”）{
iconName=`ios heart${focused？”：“-empty”}`；
}else if（routeName==“收件箱”）{
iconName=`ios邮件${focused？”：“-open”}`；
}
返回；
},
}
})
},
{
选项卡选项：{
activeTintColor:“番茄”，
颜色：“灰色”
}
}
);

您在activeTintColor中有输入错误 更多阅读

---

Blockquote

您没有将组件返回到tabBarIcon prop，因此只需添加返回，即可修复图标渲染

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

---

您没有将组件返回到tabBarIcon prop，因此只需添加返回，即可修复图标渲染

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