为什么 React-Native 的 Image Component 会出现这个错误？

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
  },

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

错误：图像组件不能包含子组件。如果您想在图像顶部呈现内容，请考虑使用绝对定位。

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

我已经参考了这个指南。

Text Overlay Image with Darkened Opacity React Native

https://snack.expo.io/S15Lt3vjg

但是，这个错误对我不起作用。

Answer 1

如果你想设置一些背景颜色或图片作为屏幕背景，你需要使用ImageBackground代替Image。

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