React Native中如何修改TabBar圆角区域后方的背景颜色

我懂你遇到的问题啦！你已经给底部TabBar设置了顶部圆角和softBlack背景色，但圆角凹进去的那块区域还是默认的背景色，看起来很不协调对吧？别担心，咱们只需要简单修改一下代码就能解决这个问题～

问题的根源在于：TabBar是叠加在页面内容之上的，你设置的圆角让TabBar顶部出现了空缺，这个空缺区域显示的是导航容器或者底层视图的背景色。咱们只需要把这个底层背景色改成和TabBar一致的颜色就可以了。

这里有两种简单的解决方法，你可以根据自己的情况选择：

方法一：直接给NavigationContainer设置背景色 #

只需要给NavigationContainer添加一个style属性，把背景色设置成你TabBar用的Assets.colors.softBlack就行：

<NavigationContainer style={{ backgroundColor: Assets.colors.softBlack }}>
  {/* 你的Tab.Navigator和屏幕内容 */}
</NavigationContainer>

方法二：给Tab.Navigator包裹全屏View #

如果方法一没生效，你可以在NavigationContainer内部、Tab.Navigator外面套一个全屏的View，设置它的背景色：

首先记得导入View组件：

import { View } from 'react-native';

然后修改你的代码结构：

<NavigationContainer>
  <View style={{ flex: 1, backgroundColor: Assets.colors.softBlack }}>
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: Assets.colors.gold,
        tabBarStyle: {
          backgroundColor: Assets.colors.softBlack,
          borderTopWidth: 0,
          borderTopLeftRadius: 15,
          borderTopRightRadius: 15,
        },
      }}>
      {/* 你的屏幕组件 */}
    </Tab.Navigator>
  </View>
</NavigationContainer>

修改后的完整代码示例 #

这里是整合了方法二的完整App.tsx代码，你可以直接参考：

import React from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LocationScreen from './screens/LocationScreen';
import Root from './Root';
import Assets from './assets/Assets';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <View style={{ flex: 1, backgroundColor: Assets.colors.softBlack }}>
        <Tab.Navigator
          screenOptions={{
            tabBarActiveTintColor: Assets.colors.gold,
            tabBarStyle: {
              backgroundColor: Assets.colors.softBlack,
              borderTopWidth: 0,
              borderTopLeftRadius: 15,
              borderTopRightRadius: 15,
            },
          }}>
          <Tab.Screen
            name="Root"
            component={Root}
            options={{ title: 'Accueil', headerShown: false }}
          />
          <Tab.Screen
            name="Location"
            component={LocationScreen}
            options={{ title: 'Emplacements', headerShown: false }}
          />
        </Tab.Navigator>
      </View>
    </NavigationContainer>
  );
};

export default App;

这样修改之后，TabBar圆角后方的区域就会和TabBar的背景色完全统一啦，视觉上就不会有突兀的空白了～

备注：内容来源于stack exchange，提问作者Alexandre