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

【问题标题】：How to handle the SafeArea's background color with Bottom Tab Navigation?如何使用底部标签导航处理 SafeArea 的背景颜色？
【发布时间】：2020-03-06 09:59:50
【问题描述】：

当前行为

大家好，

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

<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

【问题讨论】：

我自己也遇到了这个问题。运气好吗？
我也有同样的问题！

标签： react-native react-navigation react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

我刚刚设置backgroundColor

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

【讨论】：

【解决方案2】：

screenOptions={({route}) => ({
    tabBarStyle: {backgroundColor: '#436332', borderTopColor: '#23321A'},
    tabBarLabelStyle: {
      fontWeight: '600',
      fontSize: 12,
    },
    tabBarActiveTintColor: '#f1c522',
    tabBarInactiveTintColor: '#f4f1de',
    tabBarActiveBackgroundColor: '#436332',
    tabBarInactiveBackgroundColor: '#436332',
  })}

【讨论】：

【解决方案3】：

我在这个答案中找到了一个选项（我不喜欢，但它有效）：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>

放置位置：absolute和bottom，left和right属性。它对我有用。

【讨论】：