将 resizeMode 设置为“repeat”的 React Native ImageBackground 未覆盖整个元素（左侧空白）答案

【问题标题】：React Native ImageBackground with resizeMode set to 'repeat' is not covering entire element (blank space left)将 resizeMode 设置为“repeat”的 React Native ImageBackground 未覆盖整个元素（左侧空白）
【发布时间】：2019-04-10 17:01:55
【问题描述】：

我正在尝试使用覆盖设备整个屏幕的单个 ImageBackground 元素创建“平铺”背景。我的问题是，即使 ImageElement 覆盖整个屏幕，如附加图像上的红色边框所示，内部图像仅覆盖整个宽度并垂直留下空白区域。我检查了文档，但找不到任何相关内容。这是我的组件

      <ImageBackground source={require('../../images/linepattern.jpg')} style={[styles.container]}
  resizeMode='repeat' 
  imageStyle={{resizeMode : 'repeat', overflow : 'visible', backfaceVisibility: 'visible', flex : 1}}>

及其样式

container: {

flex : 1,
borderColor: 'red',
borderWidth:10

}

感谢您的帮助。

【问题讨论】：

你想要单个图像覆盖整个屏幕还是你想要重复图像覆盖整个屏幕？
@HazimAli 我想要一个重复的图像覆盖整个屏幕
你用另一个视图包裹了 ImageBackground 吗？或任何东西..它应该跟随父级，因为您将 flex 1 放到组件中..我发现在这种情况下不需要 imageStyle
@HazimAli ImageBackground 没有包裹在任何东西中，它甚至没有任何孩子（我已经尝试过有孩子和没有孩子）.. 我也省略了 imageStyle 道具并将resizeMode='repeat' 作为直接道具，但什么都没有。我仍然得到相同的结果...我知道 ImageBackground 视图覆盖了整个屏幕，所以我认为它可能与内部图像有关，但我很难过
@HazimAli 我认为我的问题可能与我使用 React Native Navigation 及其布局组件的方式有关。我只是在 expo 上尝试了相同的代码，它的工作原理是预计。

标签： react-native imagebackground

【解决方案1】：

试试这个；

<ImageBackground
  source={require('../../images/linepattern.jpg')}
  style={styles.container}
  imageStyle={{
    resizeMode: 'repeat',
    overflow: 'visible',
    backfaceVisibility: 'visible',
    flex: 1,
  }}
>
  ....
</ImageBackground>;

然后

container:{height:'100%, width:'100% }

【讨论】：