< Image>组件不能包含子代.如果要在图像顶部渲染内容，请考虑使用绝对定位 [英] The <Image> component cannot contain children. If you want to render content on top of the image, consider using absolute positioning

问题描述

我正在完成一个关于react native的教程.对于特定的屏幕，讲师建议以下代码:

I am completing a tutorial on react native. For a certain screen, the instructor recommends the following code:

<Image source={bgImage} style={styles.backgroundContainer}> 
    <View style={styles.container}>
        <Quote quoteText={this.props.text} quoteSource={this.props.source}/>
    </View>
</Image>

但是当我使用它时，我得到了上面的错误.

But when I use this, I get the above error.

我已经尝试过替代方法，但是当我这样做时，背景图像甚至都不会加载.

I've tried alternatives to this, but when I do, the background image doesn't even load.

编辑:按照下面的要求，这是我的样式代码.我要使用的是使用本地存储在应用程序代码中的背景渐变图像，其中文本覆盖在该背景上.我现在使用下面的建议得到的只是屏幕顶部的文本，没有背景图像.

As requested below, here's my styling code. What I'm going for is using a background gradient image stored locally to the app code with text overlayed over that background. What I currently get by using the suggestion below is just the text at the very top of the screen and no background image.

const styles = StyleSheet.create({
  backgroundContainer: {
    flex: 1,
    resizeMode: 'cover',
    width: undefined,
    height: undefined,
    backgroundColor: '#889DAD',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
});

推荐答案

不允许将其他组件放在图像组件中.您需要将View包裹在Image上，并将其定位为绝对视图.

You are not allowed to put other components inside an image component. You need to wrap a View around your Image and positioned it as absolute.

<View style={{ flex: 1}}>
<Image source={bgImage} style={styles.backgroundContainer} /> 
<View style={styles.container}>
    <Quote quoteText={this.props.text} quoteSource={this.props.source}/>
</View>
</View>


container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0, 
    justifyContent: 'center',
    alignItems: 'center',
  },

从react-native版本50.0开始，您可以简单地使用ImageBackground

Since react-native version 50.0, you can simply use ImageBackground

这篇关于< Image>组件不能包含子代.如果要在图像顶部渲染内容，请考虑使用绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！