react-native - 反应导航标签栏颜色不起作用

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>
  );
}

编辑

所以我希望我的标签栏有一个图标但没有文字。例如 Instagram 有一个这样的标签栏：

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

标签： react-nativenavigationreact-navigationjsxtabbar

Answer 1

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