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 反应原生：0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/底部标签：^5.0.5

Answer 1

我刚设置backgroundColor

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

Answer 2

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

Answer 3

我在这个答案中找到了一个选项（我不喜欢，但它有效）：你如何使 react-native react-navigation 选项卡栏透明

<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属性。这个对我有用。