React Native应用程序iPhone11中HomeScreen上的全屏背景图像

Question

我目前正在尝试在iphone 11的登录视图上设置完整的背景图片

     const Background = styled.ImageBackground`

      padding:20px;
      justify-content:center;

      width:100%;
      height:100%;
      `
      const styles = StyleSheet.create({
            imageContainer: {
              flex: 1,
              alignItems: 'stretch'
            },
            image: {
              flex: 1
            }
          });
    
        return <SafeAreaView style={styles.imageContainer}><Background style={styles.image} source={require('../../assets/images/background-cover.jpg')}>
            <CoverLogo width={100} height={100} color={Colors.White} />
    
            <Introduction loop={false}>
                <TextHeading text={`TestHeader`} />
                
            </Background>
        </SafeAreaView>

当前输出的内容：

​

​

我想让背景占据空白区域。此问题似乎仅在phone 11s中出现

Answer 1

你应该用图像包住你的SafeAreaView，并确保SafeAreaView的不透明度设置为0。

<ImageBackground
    source={imgsrc}
    style={{position: "absolute", height: "100%", width: "100%"}}>
    <SafeAreaView style={{opacity: 0}}>
       // place for your app components
    </SafeAreaView>
</ImageBackground>