英文:
How to modify "selected tab" bottom border color on TopTabNavigator
问题
我正在开发一个使用react-navigations的react-native应用，使用createMaterialTopTabNavigator。我已经阅读了文档，但似乎找不到需要修改的props来改变活动选项卡的底部边框颜色。
有人有什么建议吗？
顺便说一下，这是我的当前导航器代码：
const TopTab = createMaterialTopTabNavigator()
function ProgressNavigator() {
const themes = useThemes()
return (
<TopTab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: themes.lightBackground,
},
tabBarLabelStyle: {
paddingTop: 10,
fontSize: 14,
fontWeight: "bold",
},
tabBarActiveTintColor: themes.secondary.color,
tabBarInactiveTintColor: "#FFF",
}}
>
<TopTab.Screen name="Table" component={ProgressTable} />
<TopTab.Screen name="Chart" component={ProgressChart} />
</TopTab.Navigator>
)
}
英文:
I'm working on a react-native app using react-navigations createMaterialTopTabNavigator. I've read through the docs, but I cannot seem to find what props I need to modify to change the bottom border color of the active tab.
Does anyone have any advice?
FWIW here is my current Navigator code:
const TopTab = createMaterialTopTabNavigator()
function ProgressNavigator() {
const themes = useThemes()
return (
<TopTab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: themes.lightBackground,
},
tabBarLabelStyle: {
paddingTop: 10,
fontSize: 14,
fontWeight: "bold",
},
tabBarActiveTintColor: themes.secondary.color,
tabBarInactiveTintColor: "#FFF",
}}
>
<TopTab.Screen name="Table" component={ProgressTable} />
<TopTab.Screen name="Chart" component={ProgressChart} />
</TopTab.Navigator>
)
}
答案1
得分: 1
使用 tabBarIndicatorStyle 来样式化指示器。以下示例设置标签（以及可能的图标）和指示器为红色。
<Tab.Navigator
screenOptions={{
tabBarIndicatorStyle: {
backgroundColor: 'red'
},
tabBarActiveTintColor: 'red',
}}>
...
</Tab.Navigator>
英文:
Use tabBarIndicatorStyle to style an indicator. Below example sets label (and possible icon) and indicator to red.
<Tab.Navigator
screenOptions={{
tabBarIndicatorStyle: {
backgroundColor: 'red'
},
tabBarActiveTintColor: 'red',
}}>
...
</Tab.Navigator>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论