React Navigation 标签栏颜色不起作用

Question

我有一个带有标签栏的 React Navigation 导航系统。现在我的问题：

当我添加颜色时，我的图标下的文字会出现。如果我删除文本，我就没有标签栏颜色。标签或颜色：/这是我的代码：


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="Home" component={HomeScreen} options={{tabBarIcon: () => <ChatBubbleIcon />}} />
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIcon /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

编辑

所以我希望我的 Tabbar 有一个图标但没有文本。例如 Instagram 有一个像这样的 Tabbar：

你怎么看：Instagram 不是纯白色 --> 它有浅灰色。

Answer 1

尝试使用 screenOptions 而不是 tabBarOptions！ :)

React Navigation 标签栏颜色不起作用

React Navigation tabbar color doesn't work

react-native

navigation

react-navigation

jsx

tabbar

编辑