反应导航 tabBarIcon 不显示尽管休息

Question

React native react-navigation tabBarIcon 不显示，尽管其他人显示这是代码

    import * as React from "react";
    import { HomeStack, FlashStack, ProfileStack, TvStack } from "./src/Routes";
    import { NavigationContainer } from "@react-navigation/native";
    import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import { AntDesign, Entypo, Feather } from "@expo/vector-icons";
    
    export default function App() {
      const Tab = createBottomTabNavigator();
      return (
        <NavigationContainer>
          <Tab.Navigator
            initialRouteName="HomeScreen"
            screenOptions={{ headerShown: false }}
          >
            <Tab.Screen
              name="HomeScreen"
              component={HomeStack}
              Options={{
                tabBarIcon: ({ focused, color }) => (
                  <AntDesign name="home" size={focused ? 29 : 24} color={color} />
                ),
                tabBarLabel: "Home",
                tabBarActiveTintColor: "blue",
                tabBarInactiveTintColor: "black",
              }}
            />
            <Tab.Screen
              name="FlashTvScreen"
              component={FlashStack}
              options={{
                tabBarIcon: ({ focused, color }) => (
                  <Entypo name="flash" size={focused ? 29 : 24} color={color} />
                ),
                tabBarLabel: "Flash Tv",
                tabBarActiveTintColor: "blue",
                tabBarInactiveTintColor: "black",
              }}
            />
            <Tab.Screen
              name="TvScreen"
              component={TvStack}
              options={{
                tabBarIcon: ({ focused, color }) => (
                  <Feather name="tv" size={focused ? 29 : 24} color={color} />
                ),
                tabBarLabel: "Tv",
                tabBarActiveTintColor: "blue",
                tabBarInactiveTintColor: "black",
              }}
            />
            <Tab.Screen
              name="ProfileScreen"
              component={ProfileStack}
              options={{
                tabBarIcon: ({ focused, color }) => (
                  <AntDesign name="user" size={focused ? 29 : 24} color={color} />
                ),
                tabBarLabel: "Profile",
                tabBarActiveTintColor: "blue",
                tabBarInactiveTintColor: "black",
              }}
            />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }

package.json :

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12",
    "react-native-safe-area-context": "3.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

image of HomeScreen icon not displaying

image of another screen icon displaying correctly

我已经尝试了所有方法，但 none 有效任何帮助将不胜感激

注意：我还注意到，每次我导航到主屏幕时，颜色都会因未知原因变成灰色

Answer 1

你打错了：

<Tab.Screen
              name="HomeScreen"
              component={HomeStack}
     --->>>   Options={{   // needs to be options, not Options
                tabBarIcon: ({ focused, color }) => (
                  <AntDesign name="home" size={focused ? 29 : 24} color={color} />
                ),
                tabBarLabel: "Home",
                tabBarActiveTintColor: "blue",
                tabBarInactiveTintColor: "black",
              }}
            />

反应导航 tabBarIcon 不显示尽管休息

react navigation tabBarIcon not showing despite the rest

javascript

reactjs

react-native

react-navigation