Javascript React Native：my<；中不允许有儿童；图像></图像>；

我的代码有问题

我不允许在图像标签之间插入任何内容，但我需要这样做，以便加载应用程序的其余部分

class BackgroundImage extends Component {
render() {
    return(
        <Image source={require('./img/Sunny.jpg')}
              style={styles.backgroundImage}>
                  {this.props.children}
        </Image>
    )
}
}

class BackgroundImage扩展组件{
render（）{
返回(
{this.props.children}
)
}
}

这是我正在使用的代码，但是对于另一个同学来说，它工作得很好。 很遗憾，我在他的密码里找不到任何特别的东西

以下是错误：

编辑：现在我把标签放在我的整个代码上。 唯一加载的是背景图像，其他什么都没有

我只是想给我的应用程序添加一个背景，这给了我一个哈尔德时间。非常感谢您的帮助，谢谢

编辑：

我的可怕代码的额外图片：

这就是我现在拥有的。在我的代码中，只有

和

带有

this.state.x

---

您需要在图像周围放置一个视图，并将其定位为绝对视图，因为不允许将子对象传递给图像标记

import React, { Component } from 'react';
import { Text } from 'react-native';
import BackgroundImage from './BackgroudImage';

class MainApp extends Component {

render() {
    return (
        <BackgroundImage>
            <Text style={{ backgroundColor: 'transparent', fontSize: 30 }}> Test </Text>
        </BackgroundImage>
    );
  }
}
export default MainApp; 

import React，{Component}来自'React'；
从“react native”导入{Text}；
从“./BackgroundImage”导入背景图像；
类MainApp扩展组件{
render（）{
返回(
试验
);
}
}
导出默认MainApp；

这里是您的背景图像组件：

import React, { Component } from 'react';
import { View, Image } from 'react-native'; 
import background from '../../img/test.jpg';

class BackgroundImage extends Component {
    render() {
        return (
            <View style={{ flex: 1, position: 'relative' }}>
            {this.props.children}
            <Image 
            source={background}
            style={{ zIndex: -1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, resizeMode: 'cover' }} 
            />
            </View>
        );
    }
}
export default BackgroundImage; 

import React，{Component}来自'React'；
从“react native”导入{View，Image}；
从“../../img/test.jpg”导入背景；
类BackgroundImage扩展组件{
render（）{
返回(
{this.props.children}
);
}
}
导出默认背景图像；

结果如下：

---

编辑：示例

您需要在图像周围放置一个视图，并将其定位为绝对视图，因为不允许将子对象传递给图像标记

import React, { Component } from 'react';
import { Text } from 'react-native';
import BackgroundImage from './BackgroudImage';

class MainApp extends Component {

render() {
    return (
        <BackgroundImage>
            <Text style={{ backgroundColor: 'transparent', fontSize: 30 }}> Test </Text>
        </BackgroundImage>
    );
  }
}
export default MainApp; 

import React，{Component}来自'React'；
从“react native”导入{Text}；
从“./BackgroundImage”导入背景图像；
类MainApp扩展组件{
render（）{
返回(
试验
);
}
}
导出默认MainApp；

这里是您的背景图像组件：

import React, { Component } from 'react';
import { View, Image } from 'react-native'; 
import background from '../../img/test.jpg';

class BackgroundImage extends Component {
    render() {
        return (
            <View style={{ flex: 1, position: 'relative' }}>
            {this.props.children}
            <Image 
            source={background}
            style={{ zIndex: -1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, resizeMode: 'cover' }} 
            />
            </View>
        );
    }
}
export default BackgroundImage; 

import React，{Component}来自'React'；
从“react native”导入{View，Image}；
从“../../img/test.jpg”导入背景；
类BackgroundImage扩展组件{
render（）{
返回(
{this.props.children}
);
}
}
导出默认背景图像；

结果如下：

---

编辑：示例

您不能将子项添加到Image@LucaZiegler为这段代码制作“教程”的网站运行良好。我的同学也是这样。太混乱了。你可以用ImageView试试。你不能将子对象添加到Image@LucaZiegler为这段代码制作“教程”的网站运行良好。我的同学也是这样。太混乱了。你可以用你的代码用ImageView试试。我收到一条错误消息，this.props.children是一个保留字。你是否传递你的BackgroundImage组件children？比如说这是一个文本是的。我在我的主要组件中使用背景图像，围绕代码的其余部分。但现在它只加载在背景图像中，其余部分保持不变。你能提供更多的代码和截图吗？添加了图片。谢谢使用您的代码，我收到错误消息this.props.children是一个保留字。您是否传递BackgroundImage组件子级？比如说这是一个文本是的。我在我的主要组件中使用背景图像，围绕代码的其余部分。但现在它只加载在背景图像中，其余部分保持不变。你能提供更多的代码和截图吗？添加了图片。谢谢