<Image> 组件不能包含子组件。如果要在图像顶部呈现内容，请考虑使用绝对定位

Question

我正在完成有关本机的教程。对于特定屏幕，讲师建议以下代码：

<Image source={bgImage} style={styles.backgroundContainer}> 
    <View style={styles.container}>
        <Quote quoteText={this.props.text} quoteSource={this.props.source}/>
    </View>
</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',
  },
});

Answer 1

由于反应本来0.50，您不能在 <Image>标签中嵌套组件，而是必须使用 <ImageBackground>进行背景图像。V0.50.0

Answer 2

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

<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

Answer 3

使用

<ImageBackground
    source={image}
    style={styles.contentContainer} >
    // Your view content goes here
 </ImageBackground>
const styles = StyleSheet.create({
    contentContainer: {
        flex: 1,
  },
});

工作就像魅力