Question

我的代码存在问题。

我不允许在我的图片标记之间放置任何内容，但我需要加载我的应用程序的其余部分。

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

这是我正在使用的代码，但对于另一个类伙伴，它工作得很好。遗憾的是，我在他的代码中找不到任何特别的东西。

这是错误： image error screen

编辑：现在我把标签放在我的整个代码周围。加载的唯一东西是背景图像，没有别的。

我只是想为我的应用程序添加一个背景，它给了我一个哈哈时间。任何帮助将非常感谢，谢谢！

编辑：

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

Start of render

End of render

CSS

这就是我现在所拥有的。在我的代码中，只有<Text>和<View>与this.state.x

The code

Attempt with Tim's code (failed)

Answer 1

您需要在图片周围放置一个View并将其定位为绝对图片，因为您不允许将子图片传递给图片代码。

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;

在这里你的BackgroundImage组件：

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;

结果如下：

编辑：示例

React-Native：我的<img/>中不允许有孩子

1 个答案: