Javascript &引用；这个<；图像>；组件不能包含子级“；在React Native中，可能的修复方法是什么？

第一天使用

React Native

。尝试在

React Native

应用程序中加载多个图像。但是，应用程序会因以下错误而崩溃：

错误：组件不能包含子级。如果你想 在图像的顶部渲染内容，考虑使用

组件或绝对定位

我尝试解决这些现有问题，但未能解决我的问题：

还尝试将

替换为

，但这也无法解决问题

下面是我的

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,
  },
});

import React，{Component}来自'React'；
进口{
样式表，
看法
形象
}从“反应本机”；
const playcon=require（'./images/play.png'）；
const volumeIcon=require（'./images/sound.png'）；
const hdIcon=require（'./images/hd-sign.png'）；
const fullscreencon=require（'./images/fullscreen.png'）；
常量remoteImage={uri:'https://s3.amazonaws.com/crysfel/public/book/new-york.jpg' };
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
全屏：{
弹性：1，
},
容器：{
位置：'绝对'，
背景颜色：“#202020”，
边界半径：5，
flexDirection:'行'，
身高：50，
填充：5，
paddingTop:16，
底数：30，
右:10,，
左:10,，
边框宽度：1，
边框颜色：“#303030”，
},
图标：{
tintColor:“#fff”，
身高：16，
宽度：16，
边缘左：5，
marginRight:5，
},
进展：{
背景颜色：“#000”，
边界半径：7，
弹性：1，
身高：14，
差额：10，
玛金托普：2，
},
进度条：{
背景颜色：“#bf161c”，
边界半径：5，
身高：10，
差额：2，
宽度：80，
},
});

---

什么可能导致此问题以及如何解决此问题

这不起作用，因为必须用父视图包装所有组件。 图像不能是父视图

大概是这样的：

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>
  );
}

render（）{
返回(
);
}
带有嵌套内容的

不再受支持。改用

<View style={styles}>
  <ImageBackground style={styles} source={source} resizeMode={resizeMode} >
    {children}
  </ImageBackground>
  {...}
</View>

{儿童}
{...}

您还需要添加父组件（

视图

）来包装所有组件