Javascript 这个<；图像>；组件不能包含子级。如果您想在图像的顶部渲染内容，请考虑使用绝对定位。

我正在完成关于react native的教程。对于特定屏幕，讲师建议使用以下代码：

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

---

不允许在图像组件中放置其他组件。您需要在图像周围环绕视图，并将其定位为绝对视图

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

容器：{
位置：'绝对'，
排名：0，
底部：0，
左:0,，
右:0,，
为内容辩护：“中心”，
对齐项目：“居中”，
},

编辑：

---

由于react native version 50.0，您可以简单地使用

，因为react native 0.50不能将组件嵌套在

标记中，而必须用于背景图像

使用

<ImageBackground
    source={image}
    style={styles.contentContainer} >
    // Your view content goes here

 </ImageBackground>

const styles = StyleSheet.create({
    contentContainer: {
        flex: 1,
  },
});

//您的查看内容将显示在此处
const styles=StyleSheet.create({
内容容器：{
弹性：1，
},
});

---

就像一个符咒一样有效

这是我一开始尝试的。然而，当我这样做时，图像没有渲染（我承认这可能是一个完全不同的问题）。我编辑了OP以包含样式目标和我使用的样式代码。是的，删除“backgroundContainer”的样式可以使背景图像正确渲染。谢谢

<ImageBackground
    source={image}
    style={styles.contentContainer} >
    // Your view content goes here

 </ImageBackground>

const styles = StyleSheet.create({
    contentContainer: {
        flex: 1,
  },
});