React Native嵌套Stack与Bottom Tabs时出现异常背景色问题

问题现象 #

在Android模拟器中使用自定义样式的Bottom Tabs Navigator时，点击嵌套Stack Navigator的Info标签页，底部标签栏后方会出现异常背景色；切换到绑定普通组件的标签页时，该背景色自动消失。

问题代码 #

Bottom Tabs Navigator 实现代码 #

const Tab = createBottomTabNavigator();

<Tab.Navigator
  tabBar={props => (
    <View
      style={{
        backgroundColor: 'transparent',
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
      }}>
      <BottomTabBar {...props} />
    </View>
  )}
  screenOptions={{
    headerShown: false,
    tabBarHideOnKeyboard: true,
    tabBarStyle: {
      position: 'relative',
      justifyContent: 'center',
      alignItems: 'center',
      alignSelf: 'center',
      elevation: 0,
      borderTopLeftRadius: 30,
      borderTopRightRadius: 30,
      bottom: 0,
      height: 55,
      backgroundColor: theme.colors.secondaryContainer,
    },
    tabBarLabelStyle: {
      fontFamily: 'RobotoCondensed-Regular',
      fontSize: 16,
      marginBottom: 10,
    },
    tabBarIconStyle: {
      marginTop: 0,
    },
    tabBarActiveTintColor: theme.colors.error,
    tabBarInactiveTintColor: theme.colors.secondary,
  }}
  sceneContainerStyle={{
    backgroundColor: 'transparent',
    paddingBottom: 70,
  }}
  initialRouteName="SealScreen"
  detachInactiveScreens={false}>
  <Tab.Screen
    options={{
      tabBarShowLabel: false,
      tabBarLabel: 'Seal',
      tabBarIcon: ({color, size}) => (
        <MaterialCommunityIcons name="seal" color={color} size={size} />
      ),
    }}
    name="SealScreen"
    component={SealScreen}
  />
  <Tab.Screen
    options={{
      tabBarShowLabel: false,
      tabBarLabel: 'Slot',
      tabBarIcon: ({color, size}) => (
        <MaterialCommunityIcons
          name="slot-machine"
          color={color}
          size={size}
        />
      ),
    }}
    name="SlotScreen"
    component={SlotScreen}
  />
  <Tab.Screen
    options={{
      tabBarShowLabel: false,
      tabBarLabel: 'Info',
      tabBarIcon: ({color, size}) => (
        <MaterialCommunityIcons
          name="information"
          color={color}
          size={size}
        />
      ),
    }}
    name="InfoScreen"
    component={InfoStackNavigator}
  />
</Tab.Navigator>

嵌套的 Stack Navigator 代码 #

const InfoStackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="P1" component={PP1} />
      <Stack.Screen name="P2" component={PP2} />
    </Stack.Navigator>
  );
};

解决方案 #

这个问题的核心原因是：嵌套的Stack Navigator没有继承Tabs Navigator的sceneContainerStyle配置，导致其页面背景未设置为透明，从而在底部标签栏的透明外层后方透出默认背景色。

修复方法 #

给嵌套的Stack Navigator添加与Tabs一致的sceneContainerStyle配置：

const InfoStackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        // 添加与Tabs一致的容器样式
        sceneContainerStyle: {
          backgroundColor: 'transparent',
          paddingBottom: 70,
        }
      }}>
      <Stack.Screen name="P1" component={PP1} />
      <Stack.Screen name="P2" component={PP2} />
    </Stack.Navigator>
  );
};

备选方案（若上述方法无效） #

如果问题仍存在，可以给Tabs Navigator的外层容器设置全局背景色，覆盖异常透出的背景：

<View style={{flex: 1, backgroundColor: theme.colors.background}}>
  <Tab.Navigator
    // ... 原有配置
  >
    // ... 标签页配置
  </Tab.Navigator>
</View>

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