React Native中如何为SafeAreaView动态设置上下区域不同颜色？

问题背景 #

单独使用SafeAreaView设置顶部/底部安全区不同颜色的方案可行，但在同时使用TabNavigator和StackNavigator的场景下，每个页面的顶部、底部安全区颜色各不相同，需要一套动态适配的实现方式。

原单个页面实现代码：

import { View, Text, SafeAreaView } from 'react-native';

function App(){
  return(
    <View style={{ flex: 1 }}>
      <SafeAreaView style={{ flex: 0, backgroundColor: "red" }} />
      <SafeAreaView style={{ flex: 1, backgroundColor: "blue" }}>
        <View style={{ flex: 1, backgroundColor: "yellow", justifyContent: 'space-between', alignItems: 'center' }} >
            <Text>This is top text.</Text>
            <Text>This is bottom text.</Text>
        </View>
      </SafeAreaView>
</View>
  )
}

export default App;

示例效果：

当前应用导航结构：

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import { TabBar } from "../components";

import A from "../screens/A";
import B from "../screens/B";
import Detail from "../screens/Detail";

function TabScreens() {

    const Tab = createBottomTabNavigator();

    return (
        <Tab.Navigator tabBar={props => <TabBar {...props} />} screenOptions={{ headerShown: false }}>
            <Tab.Screen name="a" component={A} />
            <Tab.Screen name="b" component={B} />
        </Tab.Navigator>
    );
}

function StackScreens() {

    const Stack = createStackNavigator();
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="tabScreens" screenOptions={{ headerShown: false, gestureEnabled: false }}>
                <Stack.Screen name="tabScreens" component={TabScreens} />
                <Stack.Screen name="detail" component={Detail} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

function App() {
    return <StackScreens />
}

实现方案 #

1. 封装自定义安全区容器组件 #

创建可复用的ScreenContainer组件，接收顶部、底部安全区颜色参数，动态渲染对应样式的安全区：

// components/ScreenContainer.js
import { View, SafeAreaView } from 'react-native';

export default function ScreenContainer({ 
  topSafeAreaColor = 'white', 
  bottomSafeAreaColor = 'white', 
  ignoreBottomSafeArea = false,
  children 
}) {
  return (
    <View style={{ flex: 1 }}>
      {/* 顶部安全区 */}
      <SafeAreaView style={{ flex: 0, backgroundColor: topSafeAreaColor }} />
      {/* 内容区域：区分是否忽略底部安全区（适配Tab导航） */}
      {ignoreBottomSafeArea ? (
        <View style={{ flex: 1 }}>{children}</View>
      ) : (
        <SafeAreaView style={{ flex: 1, backgroundColor: bottomSafeAreaColor }}>
          {children}
        </SafeAreaView>
      )}
    </View>
  );
}

2. 在页面组件中使用容器 #

每个页面根据需求传入对应颜色参数，Tab页面需开启ignoreBottomSafeArea（因为TabBar会占据底部安全区）：

// screens/A.js
import ScreenContainer from '../components/ScreenContainer';
import { View, Text } from 'react-native';

export default function A() {
  return (
    <ScreenContainer topSafeAreaColor="red" ignoreBottomSafeArea={true}>
      <View style={{ flex: 1, backgroundColor: 'yellow', justifyContent: 'center', alignItems: 'center' }}>
        <Text>页面A</Text>
      </View>
    </ScreenContainer>
  );
}

// screens/B.js
import ScreenContainer from '../components/ScreenContainer';
import { View, Text } from 'react-native';

export default function B() {
  return (
    <ScreenContainer topSafeAreaColor="green" ignoreBottomSafeArea={true}>
      <View style={{ flex: 1, backgroundColor: 'pink', justifyContent: 'center', alignItems: 'center' }}>
        <Text>页面B</Text>
      </View>
    </ScreenContainer>
  );
}

// screens/Detail.js
import ScreenContainer from '../components/ScreenContainer';
import { View, Text } from 'react-native';

export default function Detail() {
  return (
    <ScreenContainer topSafeAreaColor="orange" bottomSafeAreaColor="teal">
      <View style={{ flex: 1, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
        <Text>详情页</Text>
      </View>
    </ScreenContainer>
  );
}

3. 可选：通过导航参数动态传递颜色 #

如果需要在跳转时动态修改安全区颜色，可通过route.params传递参数：

// 在任意页面中跳转详情页时传递颜色参数
navigation.navigate('detail', { 
  topSafeAreaColor: 'orange', 
  bottomSafeAreaColor: 'teal' 
});

// 更新后的Detail.js
export default function Detail({ route }) {
  const { 
    topSafeAreaColor = 'orange', 
    bottomSafeAreaColor = 'teal' 
  } = route.params || {};
  
  return (
    <ScreenContainer 
      topSafeAreaColor={topSafeAreaColor} 
      bottomSafeAreaColor={bottomSafeAreaColor}
    >
      <View style={{ flex: 1, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
        <Text>详情页</Text>
      </View>
    </ScreenContainer>
  );
}

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