反应导航选项卡导航器特定选项卡自定义

Posted 2023-03-15

【中文标题】反应导航选项卡导航器特定选项卡自定义

【英文标题】：react navigation tab navigator specific tab customization

【发布时间】：2017-05-08 09:06:33

【问题描述】：

如何使用 React Navigation 中的 TabNavigator 实现 一个选项卡的样式自定义？ 例如，如果我希望标签具有不同的颜色，我该怎么做？有可能吗？

---

我到处搜索，包括reactnavigation.org，但我没有得到答案：(

【参考方案1】：

你要找的可能是这个：https://reactnavigation.org/docs/navigators/custom

您可以自定义您自己的标签导航器组件

const MyApp = createNavigator(MyRouter)(MyView);

那么您应该可以自己更改 MyView 的样式。

【参考方案2】：

是的，您可以在 tabBarComponent 中添加自己的组件或在

中添加您的样式

import  createBottomTabNavigator  from 'react-navigation-tabs';
const RouteConfigs =  
// for example these are your scene 
Home ,
Setting

const TabNavigatorConfig = 
tabBarOptions: 
  activeTintColor: '#e91e63',
  labelStyle: 
    fontSize: 12,
  ,
  style: 
    backgroundColor: 'blue',
  ,

createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);