[英]"The <Image> component cannot contain children " in React Native, Possible fix ?
Day 1 with React-Native
.使用
React-Native
。 Trying to load multiple images in a React-Native
app.尝试在
React-Native
应用程序中加载多个图像。 However, the app crashes with the error:但是,应用程序崩溃并显示以下错误:
Error: The component cannot contain children.
错误:组件不能包含子组件。 If you want to render content on top of the image, consider using the
<ImageBackground>
component or absolute positioning.如果要在图像顶部呈现内容,请考虑使用
<ImageBackground>
组件或绝对定位。
I tried solutions to these existing questions, however they failed to resolve my issue:我尝试解决这些现有问题,但他们未能解决我的问题:
Also tried replacing <ImageBackground>
with <Image>
, however that did not resolve the issue as well.还尝试用
<ImageBackground>
<Image>
替换<ImageBackground>
,但这也没有解决问题。
Here's the code to my App.js
:这是我的
App.js
的代码:
import React, { Component } from 'react';
import {
StyleSheet,
View,
Image
} from 'react-native';
const playIcon = require('./images/play.png');
const volumeIcon = require('./images/sound.png');
const hdIcon = require('./images/hd-sign.png');
const fullScreenIcon = require('./images/full-screen.png');
const remoteImage = { uri:'https://s3.amazonaws.com/crysfel/public/book/new-york.jpg' };
export default class App extends Component<{}> {
render() {
return (
<Image source={remoteImage} style={styles.fullscreen}>
<View style={styles.container}>
<Image source={playIcon} style={styles.icon} />
<Image source={volumeIcon} style={styles.icon} />
<View style={styles.progress}>
<View style={styles.progressBar} />
</View>
<Image source={hdIcon} style={styles.icon} />
<Image source={fullScreenIcon} style={styles.icon} />
</View>
</Image>
);
}
}
const styles = StyleSheet.create({
fullscreen: {
flex: 1,
},
container: {
position: 'absolute',
backgroundColor: '#202020',
borderRadius: 5,
flexDirection: 'row',
height: 50,
padding: 5,
paddingTop: 16,
bottom: 30,
right: 10,
left: 10,
borderWidth: 1,
borderColor: '#303030',
},
icon: {
tintColor: '#fff',
height: 16,
width: 16,
marginLeft: 5,
marginRight: 5,
},
progress: {
backgroundColor: '#000',
borderRadius: 7,
flex: 1,
height: 14,
margin: 10,
marginTop: 2,
},
progressBar: {
backgroundColor: '#bf161c',
borderRadius: 5,
height: 10,
margin: 2,
width: 80,
},
});
What is possibly causing this issue and how to resolve it?可能导致此问题的原因是什么以及如何解决?
<Image>
with nested content is no longer supported.不再支持带有嵌套内容的
<Image>
。 Use <ImageBackground>
instead.请改用
<ImageBackground>
。
<View style={styles}>
<ImageBackground style={styles} source={source} resizeMode={resizeMode} >
{children}
</ImageBackground>
{...}
</View>
Also you need to add a parent component ( View
) to wrap all your components.您还需要添加一个父组件 (
View
) 来包装所有组件。
It's not work because you must wrap all your components with parent View.这是行不通的,因为您必须使用父视图包装所有组件。 Image cannot be the parent view.
图像不能是父视图。
something like this:像这样:
render() {
return (
<View>
<Image source={remoteImage} style={styles.fullscreen}>
<View style={styles.container}>
<Image source={playIcon} style={styles.icon} />
<Image source={volumeIcon} style={styles.icon} />
<View style={styles.progress}>
<View style={styles.progressBar} />
</View>
<Image source={hdIcon} style={styles.icon} />
<Image source={fullScreenIcon} style={styles.icon} />
</View>
</Image>
</View>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.