react-native - 如何使用底部选项卡导航处理 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
react 原生:0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/bottom-tabs: ^5.0.5

Answer 1

我刚设置backgroundColor

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