react-native - 反应导航更改材质顶部选项卡的背景颜色
问题描述
我想在反应导航 5 中更改材质顶部选项卡的边框底部颜色和背景颜色
我尝试了下面的代码,但是当我更改 tabStyle 的背景颜色时,indicatorStyle 边框底部颜色不起作用,但是当我删除 tabstyle 时,指示器样式正在工作。
<Nav />
<tTab.Navigator
tabBarOptions={{
tabStyle: { backgroundColor: "black" },
indicatorStyle: {
borderBottomColor: "#50d3a7",
borderBottomWidth: 2,
},
}}
initialRouteName="Points"
>
<tTab.Screen name="Points" component={pointleftScreen} />
<tTab.Screen name="Daily Rewards" component={calendarScreen} />
</tTab.Navigator>
我在这里添加了示例 - https://snack.expo.io/@adjmpw/chaneg-borderbottom-and-background
解决方案
你将不得不使用barOptions
prop 来定制这些东西
barStyle = {{
backgroundColor: '#694fad', //Color of your choice
borderBottomColor: '#50d3a7',
borderBottomWidth: 2,
}}
你将不得不像这样使用它
<tTab.Navigator
initialRouteName="Points"
barStyle={{
backgroundColor: '#694fad', //Color of your choice
borderBottomColor: '#50d3a7',
borderBottomWidth: 2,
}}>
>
<tTab.Screen name="Points" component={pointleftScreen} />
<tTab.Screen name="Daily Rewards" component={calendarScreen} />
</tTab.Navigator>
推荐阅读
- ruby-on-rails - 设计 Tumblr Omniauth
- oracle - Oracle RDS 中的零星长查询执行
- docker - ERRO [0001] 错误等待容器:上下文已取消
- rstudio - 是否有用于将焦点移至 RStudio 控制台的 R 代码?
- windows - 在 Docker for Windows 上运行 Oracle NETCA/NETGMGR/DBCA
- php - Doctrine 2.9,代理声明错误(错误的函数原型)
- angular - Angular 6缓存层
- android - 带有 viewpager 和底部导航的嵌套片段
- javascript - 如何黑盒除您正在调试的文件之外的所有脚本文件?
- swift - 如何从 xcassets 调用图像?