React Native应用程序iphone 11中HomeScreen上的全屏背景图像答案

【问题标题】：Full screen background image on HomeScreen in React Native app iphone 11React Native应用程序iphone 11中HomeScreen上的全屏背景图像
【发布时间】：2021-01-25 17:25:30
【问题描述】：

我目前正在尝试在 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>

目前输出的是什么：

我希望背景占据空白区域。这个问题似乎只出现在手机 11s

【问题讨论】：

尝试删除 SafeAreaView
还是不行
你在 Xcode 设置中使用full screen 吗？
@SaachiTech 你是怎么做到的？
你可以在这里找到选项Project Target > General > Deployment Info

标签： ios typescript react-native

【解决方案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>

【讨论】：