react-native - 如何防止我的 ImageBackground 在 React Native 中调整大小？

Question

目前，当您在我们的登录页面上的文本字段内单击时，ImageBackground 会调整大小或移动。我尝试将 resizeMode 设置为其所有潜在选项，但没有一个有帮助。如何在不使用 KeyboardAvoidingView 的情况下防止这种情况发生？我曾尝试使用 KeyboardAvoidingView，但它不起作用，但也对我的其他元素的宽度产生了负面影响。

<ImageBackground source={require('../../assets/signinBG.jpg')} style={styles.backgroundImage}>

款式:

backgroundImage: {
    flex: 1,
    backgroundColor:'rgba(0,0,0,0.45)',
    width: null,
    height: null
},

这是我制作的演示此行为的视频:

https://youtu.be/tVyq7mImecQ

Answer 1

首先，您需要绝对定位您的背景。确保它首先出现在渲染方法中，以便它位于最低的 Z-index。

根据您的背景有多大，您可能还需要平铺它，您可以使用屏幕尺寸和 resizeMode 来完成。

最后，ImageBackground 用于嵌套图像。如果这张图片是你整个屏幕的背景，那么你应该可以只使用 <Image/>而不是 <ImageBackground/>
尝试这个:

const d = Dimensions.get("window")

backgroundImage: {
  position: 'absolute'
  flex: 1,
  backgroundColor:'rgba(0,0,0,0.45)',
  width: d.width,
  height: d.height
}

<ImageBackground 
source={require('../../assets/signinBG.jpg')} 
style={styles.backgroundImage}
resizeMode="repeat" // or contain or cover
>