React Native嵌套导航下Tab Navigator内容样式设置失效求助

我正在开发一款将Bottom Tab Navigator嵌套在Stack Navigator中的应用，尝试为Tab.Navigator下的所有页面设置内容样式，但当前使用的配置均不生效。

原代码示例 #

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function TabNavigator(){
  return (
    <Tab.Navigator
      // tabBarOptions={{
      //   style: {backgroundColor: "#511cff"} // deprecated metro says to place it into screenOptions under tabBarStyle
      // }}
      screenOptions={{
        // headerStyle: { backgroundColor: "#2f28fc" },
        tabBarActiveTintColor: "#F8F2DA",
        tabBarOptions:{
          contentStyle: {backgroundColor:"#511cff"},
          sceneContainerStyle: {backgroundColor:"#511cff"},
        },
        tabBarStyle: {
          backgroundColor: "#2f28fc",
          contentStyle: {backgroundColor:"#511cff"},
          sceneContainerStyle: {backgroundColor:"#511cff"},
        },
        contentStyle: {backgroundColor:"#511cff"},
        sceneContainerStyle: {backgroundColor:"#511cff"},
        headerShown: false,
      }}
    >
    </Tab.Navigator>
  )
}

export default function App() {
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: { backgroundColor: "#2f28fc" },
            headerTintColor: "#F8F2DA",
            sceneContainerStyle: { backgroundColor: "#511cff" }
          }}
        >
          <Stack.Screen
            name='ExpensesView'
            component={TabNavigator}
            screenOptions={{
              sceneContainerStyle:{ backgroundColor: "#511cff" },
              contentStyle: {backgroundColor:"#511cff"}
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

解决方案 #

要为Tab.Navigator下的所有页面统一设置内容样式，直接在Tab.Navigator组件上使用sceneContainerStyle属性即可，无需嵌套在screenOptions或其他无效配置项中：

<Tab.Navigator
  sceneContainerStyle={{
    backgroundColor: "#511cff"
  }}
  screenOptions={{
    tabBarActiveTintColor: "#F8F2DA",
    tabBarStyle: {
      backgroundColor: "#2f28fc"
    },
    headerShown: false
  }}
>
  {/* 你的Tab.Screen组件 */}
</Tab.Navigator>

说明 #

• sceneContainerStyle是React Navigation中控制导航器内页面容器样式的属性，直接挂载到Tab.Navigator上时，会对其下所有页面生效。
• 原代码错误地将该属性嵌套在tabBarOptions、tabBarStyle等仅针对底部标签栏的配置中，这些位置无法影响页面内容区域的样式。
• 保留screenOptions中针对标签栏的有效配置，仅将页面容器样式单独声明在Tab.Navigator层级。

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