即使子组件位置是绝对的，图像组件也不能包含子组件

Question

我正在尝试在 Image 上显示登录表单。我确实将子位置设为Absolute，但仍然出现以下错误：

图像 组件不能包含子组件。如果你想渲染 图像顶部的内容，请考虑使用绝对定位。

下面是我的Login.js：

import React, {Component} from 'react';
import {Text, View, StyleSheet, Image} from 'react-native';
import firebase from 'firebase';

export default class Login extends Component<{}>{

  render (){
    return (
      <View style={styles.container}>
        <Image source={require('../resources/images/background_image.png')} style={styles.backgroundImage} >
            <View style={styles.loginContainer}>
            </View>
        </Image>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
  },
  loginContainer: {
    position: 'absolute',
   top: 0,
   bottom: 0,
   left: 0,
   right: 0
  },
});

谁能告诉我我做错了什么？

Answer 1

为此使用 ImageBackground 组件 - 只需像导入图像一样从“react-native”导入它。

它需要孩子 - 所以你会这样使用它：

<ImageBackground source={ Img }>
    <Text>Hello</Text>
</ImageBackground>

超级有用，但很难找到。

Answer 2

因为你带来了官方评论。

Image 组件不能包含子组件。如果你想渲染 图像顶部的内容，请考虑使用绝对定位。

图片不能包含孩子。 （以前可以，现在不行了）

评论说“使用绝对定位”并不意味着如果你使用绝对定位就可以包含孩子。

这意味着您必须将另一个视图的样式设置为绝对样式并将其放在您的图像上方。

Answer 3

正如错误提示，在您要放置在图像上方的项目上使用position: absolute。

我的例子是 HTML，但应该是类似的。

figure {
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  display: inline-block;
}

img {
  vertical-align: middle;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .1);
  padding: 5px 10px;
}

<figure>
  <img src="http://via.placeholder.com/350x150" />
  <figcaption>Img caption</figcaption>
</figure>