更改背景颜色时，反应导航选项卡栏图标消失

Question

所以我有一个带有普通 Tabbar 的 React Navigation 项目。现在我想将 Apps 颜色更改为更深的灰蓝色。所以这是我的代码：

const HomeTabs = () => {
  return (
    <Tab.Navigator tabBarOptions={{style:{backgroundColor: "#191720"}}}>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({focused}) => focused ?  <ChatBubbleIconActive /> : <ChatBubbleIcon />}}/>
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIconActive /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

我的标签栏是这样的：

太棒了！现在我想删除图标底部的 font/label 所以我将代码更改为：


const HomeTabs = () => {
  return (
    <Tab.Navigator tabBarOptions={{style:{backgroundColor: "#191720"}}, {showLabel: false}}>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({focused}) => focused ?  <ChatBubbleIconActive /> : <ChatBubbleIcon />}}/>
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIconActive /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

所以我加了showlabel: false！但是现在我的 Tabbar 看起来像这样：

您看：缺少背景色。刚走了：/

当我将 {showIcon: true} 添加到 tabBarOptions 时，我的 Tabbar 看起来像这样：

:/

比我想象的要多：为什么不更改属性的顺序。但是 Tabbar 看起来像一开始的样子

这将是代码：

const HomeTabs = () => {
  return (
    <Tab.Navigator tabBarOptions={ {showLabel: false}, {showIcon: true}, {style:{backgroundColor: "#191720"}}}>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({focused}) => focused ?  <ChatBubbleIconActive /> : <ChatBubbleIcon />}}/>
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIconActive /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

这是标签栏：

所以似乎只有 tabBarOptions 会被注册。这很糟糕，如何改变它？

Answer 1

这可能是使用 tabbaroptions 的问题（这在 v 6.x 中已弃用）。尝试使用 screenOptions 代替您想要的属性，让我知道进展如何！

更改背景颜色时，反应导航选项卡栏图标消失

React Navigation Tab Bar Icon disappears when changing background color

react-native

react-navigation