reactjs - react 导航 v5 中的 tabBarIcon 问题

Question

我想为选项卡导航设置一个图标，但它返回一个错误

这是我的代码:

<Tab.Screen name="Home" component={Home} options={{tabBarIcon:'home'}} />

这是我得到的错误:

我该如何解决这个问题？

Answer 1

您必须像这样在 tabBarOptions 中将 showIcon 属性设置为 true:

  <Tab.Navigator tabBarOptions={{ showIcon: true }}>

然后你可以像这样为你的屏幕设置图标:

<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon:(tabInfo) => (<MaterialIcons name="home" size={18} color={tabInfo.tintColor} />)}}/>

完整代码示例:

 import React from "react";
    import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
    import HomeScreen from "../screens/HomeScreen";
    import { MaterialIcons } from "@expo/vector-icons";

    const Tab = createMaterialTopTabNavigator();

    const MyTabs = (props) => {
      return (
        <Tab.Navigator
          tabBarOptions={{ showIcon: true, showLabel: false }}
        >
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              tabBarIcon: (tabInfo) => (
                <MaterialIcons name="home" size={18} color={tabInfo.tintColor} />
              ),
            }}
          />
        </Tab.Navigator>
      );
    };

    export default MyTabs;