React原生状态栏背景颜色在IOS上不会改变

Question

import {NavigationContainer, useTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {View, Text, StatusBar, useColorScheme} from 'react-native';

const Home = () => {
  const {colors} = useTheme();
  const theme = useColorScheme();

  return (
    <>
      <StatusBar
        backgroundColor={colors.background}
        barStyle={theme === 'dark' ? 'light-content' : 'default'}
      />
      <View>
        <Text>Hello World!</Text>
      </View>
    </>
  );
};
const Stack = createNativeStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

我检查了 Android 上状态栏的背景颜色已更改为深色。

但IOS上状态栏背景颜色不会改变。 iOS 上仅文本颜色发生变化。

Answer 1

背景颜色仅适用于 Android，如文档所示：https://reactnative.dev/docs/statusbar#backgroundcolor-android。

我发现的另一种选择是使用两个 SafeAreaView，第一个我们使用我们想要的颜色并将边缘效果仅应用到顶部，另一个我们将其保留在页面颜色中并将其应用到设备的其余部分:

import { useAppTheme } from '@themePaper/index'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'

type IContainerProps = {
    children: React.ReactNode
}

export function Container({ children }: IContainerProps) {
    const { colors } = useAppTheme()
    return (
        <>
            <SafeAreaView
                edges={['top']}
                style={{ flex: 0, backgroundColor: colors.secondaryContainer }}
            />
            <SafeAreaView
                edges={['left', 'right', 'bottom']}
                style={{
                    flex: 1,
                    backgroundColor: '#fff',
                    position: 'relative'
                }}
            >
                <StatusBar style="auto" />
                {children}
            </SafeAreaView>
        </>
    )
}