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

首先，您需要绝对定位背景。确保它在render方法中排在首位，以使其在最低Z索引处。

根据背景的大小，您可能还需要对其进行平铺，您可以使用屏幕尺寸和resizeMode进行平铺。

最后，ImageBackground用于嵌套图像。如果此图像是整个屏幕的背景，那么您应该只能使用<Image/>而不是<BackgroundImage/>

尝试一下：

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
>

Answer 2

我不确定您是否喜欢它，但是我没有任何问题。您可以将背景图像仅用作图像，但带有“ position：absolute”和“ zIndex：-2”。这样，它就不会移动或调整大小，并且会像背景一样散乱。

Answer 3

对不起，我现在告诉你更好。图片标记中将没有任何内容。例如，让我们创建一个带有背景图像的登录屏幕。

<Image 
source={require('your_image_path')}
style={{ position: 'absolute', zIndex: -1, width: 300, height: 640 }}
/>
<TextInput value={username} onTextChange={() => someFunction} />
<TextInput value={password} onTextChange={() => someFunction2} />

您可以将高度和宽度设置为屏幕的宽度和高度。重要的是绝对位置和zIndex -1。 zIndex -1会使图像向后移动，并且位置绝对值可以让我们将textinput（或任何元素）放在图像上。

如果我听不清，我的英语也不太好。抱歉。

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

3 个答案: