react-navigation v5设置NavigationContainer背景透明无效怎么办

光改NavigationContainer的主题背景色不生效，核心是漏了Tab导航组件多层嵌套容器的透明设置，而且默认Tab栏是占布局高度的，页面内容根本不会渲染到Tab栏所在区域，按下面步骤改就行：

核心修改点 #

• 给Tab.Navigator添加sceneContainerStyle属性，将包裹页面内容的场景容器背景设为透明，这层容器默认会填充主题色，不设透明的话会完全挡住下层内容
• 给Tab栏样式添加position: 'absolute'，让Tab栏浮在页面内容上方，而不是占据布局高度把页面内容顶上去，否则Tab栏位置下方根本没有页面内容，透明了也只能露出自带的白色背景
• 把Tab栏自身的backgroundColor从原来写的blue改成transparent，如果需要半透圆角效果可以按需调整rgba值，顺手去掉默认的顶部边框和安卓阴影
• NavigationContainer主题里的background设为transparent，这步是基础配置，但只改这步没用

修正后的代码（React Navigation v5版本，对应原有tabBarOptions写法） #

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const navTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

function App() {
  return (
    <NavigationContainer theme={navTheme}>
      <TabNavigator.Navigator
        // 关键：场景容器透明
        sceneContainerStyle={{ backgroundColor: 'transparent' }}
        tabBarOptions={{
          showLabel: false,
          style: {
            // 关键：Tab栏自身透明+绝对定位浮在内容上
            backgroundColor: 'transparent',
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            marginBottom: 15,
            borderRadius: 15,
            marginHorizontal: 10,
            height: 60,
            borderTopWidth: 0, // 去掉默认顶部边框
            elevation: 0, // 去掉安卓默认阴影
          },
          activeTintColor: constants.APP_THEME_COLOR,
          inactiveTintColor: constants.APP_WHITE_COLOR,
          keyboardHidesTabBar: true,
        }}>
          {/* 原有Tab.Screen配置 */}
      </TabNavigator.Navigator>
    </NavigationContainer>
  );
}

v6/v7版本适配 #

如果用的是v6以上版本，tabBarOptions已经被废弃，把Tab栏配置移到screenOptions里即可，对应属性名做了调整：

<TabNavigator.Navigator
  sceneContainerStyle={{ backgroundColor: 'transparent' }}
  screenOptions={{
    tabBarShowLabel: false,
    tabBarActiveTintColor: constants.APP_THEME_COLOR,
    tabBarInactiveTintColor: constants.APP_WHITE_COLOR,
    tabBarHideOnKeyboard: true, // 原keyboardHidesTabBar改名
    tabBarStyle: {
      backgroundColor: 'transparent',
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      marginBottom: 15,
      borderRadius: 15,
      marginHorizontal: 10,
      height: 60,
      borderTopWidth: 0,
      elevation: 0,
    }
  }}>
  {/* 原有Tab.Screen配置 */}
</TabNavigator.Navigator>

测试效果参考 #

之前测试的两个异常效果就是因为没做上述配置导致的：

• background设置为red时的效果：
  
• background设置为transparent时的效果（露出的白色是根视图默认背景，不是页面内容）：
  

注意：页面不要给底部加等于Tab栏高度的paddingBottom，否则内容会被顶上去，Tab栏下方还是空白区域。

内容的提问来源于stack exchange，提问作者Anu