javascript <Image> 组件不能包含子组件。如果要在图像顶部呈现内容，请考虑使用绝对定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47439627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The <Image> component cannot contain children. If you want to render content on top of the image, consider using absolute positioning
提问by Eric LaRue
I am completing a tutorial on react native. For a certain screen, the instructor recommends the following code:
我正在完成有关 React Native 的教程。针对某个画面，导师推荐如下代码：
<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.
我已经尝试过替代方法，但是当我这样做时，背景图像甚至没有加载。
EDIT: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',
},
});
回答by Shubhnik Singh
Since react-native 0.50 you can't nest components inside <Image>tag, rather you have to use <ImageBackground>for background images. Release Notes for v0.50.0
从 react-native 0.50 开始，您不能在<Image>标签内嵌套组件，而必须<ImageBackground>用于背景图像。v0.50.0 的发行说明
回答by Tim
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',
},
EDIT:Since react-native version 50.0, you can simply use ImageBackground
编辑：由于本机版本 50.0，您可以简单地使用ImageBackground
回答by Amit
Use
利用
<ImageBackground
source={image}
style={styles.contentContainer} >
// Your view content goes here
</ImageBackground>
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
},
});
Works like a charm
奇迹般有效
