javascript - 带有 ImageBackground 组件的 SafeAreaView 覆盖顶部标题

Question

我希望能够使用ImageBackground组件react-native并全屏渲染图像，包括 SafeArea 顶部和底部区域。

如您所见，我的背景图片从状态栏开始，并且没有覆盖它。我也想强制我的背景图片覆盖状态栏。

我正在使用react-navigation (v5)它的SafeAreaView组件。

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { ImageBackground, StyleSheet } from 'react-native';


export const App = () => {
  return (
    <SafeAreaProvider>
      <Navigation/>
    </SafeAreaProvider>
  );
};


const Stack = createStackNavigator();

export const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode={null}>
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export const LoginScreen = (props: any) => (
  <ImageBackground
    source={resolver.images.login.home1}
    style={{ flex: 1 }}
    resizeMode={'cover'}
  >
    <SafeAreaView style={{ flex: 1 }}>
      <View>
        <Text>Welcome to React Native!</Text>
        <Text>To get started, edit App.js</Text>
      </View>
    </SafeAreaView>
  </ImageBackground>
);

我不知道如何让我的背景图像覆盖顶部状态栏以制作全屏图像。一些帮助将不胜感激我不明白我的错误在哪里......

标签： javascriptreactjsreact-native