reactjs - 反应导航 v5 中的 tabBarIcon 问题
问题描述
我想为标签导航设置一个图标,但它返回错误
这是我的代码:
<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;
推荐阅读
- java - Scala 扩展特征字段未找到
- python - PyTorch 为什么前向函数会运行多次,我可以更改输入形状吗?
- c++ - 移除 vtk Surface Rendered 输出中的裁剪边
- r - Rcpp::Function in parellel for section
- matplotlib - 如何在 Spyder-IDE(Python) 的新窗口中绘图
- angular - Typeerror 无法读取 Karma-Jasmine 测试中未定义的属性 'triggereventhandler'
- html - WordPress标题中的垂直居中元素
- spring-data - 使用弹簧数据反应式插入或更新现有实体的正确模式
- node.js - 在猫鼬中填充返回空数组,我被卡住了
- html - 如何在引导程序 4 中删除手风琴卡标题中的底部边距?