Question

我想背景黑色不透明度。我写了这段代码。

<Image source={require('../assets/images/test_img1.png')} style={[s.lastReviewImage]}>
  <View style={s.blackOverlay}/>
</Image>



lastReviewImage: {
    flex:1,
    width: null, height: null
  },
  blackOverlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'red',
    opacity: 0.3
  },

但是，这给了我一个错误。

错误：Image组件不能包含子项。如果要在图像上渲染内容，请考虑使用绝对定位。

我知道这个错误意味着什么，但我肯定会在blackOverlay中设置绝对属性。

我已经参考了这些指南。

Text Overlay Image with Darkened Opacity React Native

https://snack.expo.io/S15Lt3vjg

但是，这对我来说不适用于错误。

Answer 1

如果要将某些背景颜色或图像设置为屏幕背景，则需要使用 ImageBackground 代替图像。

 <ImageBackground
      source={yourSourceFile}
      style={s.blackOverlay}> 
        <....yourContent...>
    </ImageBackground>

为什么React-Native的Image Component中出现此错误？

1 个答案: