React Native应用程序中登录屏幕上的全屏背景图像

Question

我目前正在尝试在登录视图中设置一个完整的背景图像。

我使用了以下代码，但注意到Iphone 11在手机底部和顶部都有一个白色的条。这是不能重叠的东西吗，因为它就像导航一样？

const Background = styled.ImageBackground`
padding:20px;
justify-content:center;
width:100%;
height:100%;
`
const styles = StyleSheet.create({
container: {
flex: 1,
},
});

在此处输入图像描述

return <SafeAreaView style={styles.container}><Background source={require('../../assets/images/background-cover.jpg')}>
<CoverLogo width={100} height={100} color={Colors.White} />
<Introduction loop={false}>
<TextHeading text={`#test`} />
<TextPage text={`Btest2`} />
<TextPage text={`Ttest3`} />
<TextPage text={`test4 Sign up !`} />
</Background>
</SafeAreaView>

Answer 1

我不确定这是否有助于屏幕底部，但对于顶部，如果使用反应导航，您可以尝试在navigationOptions中设置标题样式

headerStyle: {
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
left: 0,
right: 0,
borderBottomWidth: 0 // removes the border on the bottom
}

如果你遵循另一个答案中给出的安全区域建议，那么这可能也会有所帮助https://reactnavigation.org/docs/handling-safe-area/

Answer 2

尝试使用：

安全区域作为父视图，带有flex:1

或者可能有一个检查iPhone 11/iPhoneX的功能，比如：

isIphoneX: () => {
const dimen = Dimensions.get('window');
const deviceModel = DeviceInfo.getModel();
return (
deviceModel === 'iPhone X' ||
(Platform.OS === 'ios' &&
!Platform.isPad &&
!Platform.isTVOS &&
(dimen.height === 812 ||
dimen.width === 812 ||
dimen.height === 896 ||
dimen.width === 896))
);
},

iPhone规格

Answer 3

您的问题在于使用<SafeAreaView>标签，它限制了ios设备中屏幕空间在凹口下方和屏幕下边缘上方的使用。SafeAreaView的使用仅在ios设备上的效果中可见。

为了解决您的问题，我建议使用标签<View>而不是<SafeAreaView>