时间戳

首页 > 解决方案 > 如何防止我的 ImageBackground 在 React Native 中调整大小？

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

问题描述

目前，当您在我们的登录页面上单击文本字段时，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

标签： react-native

解决方案

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

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

最后，ImageBackground 用于嵌套图像。如果此图像是整个屏幕的背景，那么您应该能够使用 just<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
>

推荐阅读