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

由于react-native 0.50，您无法在<Image>标记内嵌套组件，而是必须使用<ImageBackground>作为背景图像。 Release Notes for 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,
  },
});

像魅力一样工作

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

3 个答案: