如何使用“底部标签导航”处理SafeArea的背景颜色？

Question

当前行为

大家好，

我想为“底部”选项卡设置背景颜色。所以我做了如下。

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#FF0000',
        activeBackgroundColor: '#FFFFFF',
        inactiveBackgroundColor: '#FF0000',
        inactiveTintColor:  '#FFFFFF'
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Account"
        component={AccountScreen}
      />
    </Tab.Navigator>

问题是SafeArea背景为白色

预期行为

我期望的是

那么您能告诉我如何在React Navigation版本5中解决这个问题吗？ 谢谢！

您的环境

iOS 反应本机：0.61.5

@ react-navigation / native：^ 5.0.5

@ react-navigation / bottom-tabs：^ 5.0.5

Answer 1

我在此答案中找到了一个选项（我不喜欢，但它可以工作）：How do you make the react-native react-navigation tab bar transparent

<Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        activeTintColor: theme.primary,
        inactiveTintColor: theme.tintInactiveTabBar,
        style: {
          backgroundColor: theme.backgroundTabBar,
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          borderTopRightRadius: 10,
          borderTopLeftRadius: 10,
        },
      }}>...</Tab.Navigator>

放置位置：绝对和底部，左侧和右侧属性。它对我有用。

Answer 2

我刚刚设置了backgroundColor

<Tab.Navigator
    initialRouteName="Stack_Main"
    tabBarOptions={{
      style: {
        backgroundColor: "#FF0000",
      },
    }}
  >