我想为选项卡导航设置一个图标,但它返回一个错误
这是我的代码:
<Tab.Screen name="Home" component={Home} options={{tabBarIcon:'home'}} />
这是我得到的错误:
我该如何解决这个问题?
最佳答案
您必须像这样在 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;
关于reactjs - react 导航 v5 中的 tabBarIcon 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60167498/