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组件不能包含子项。如果你想渲染将内容放在图像顶部，考虑使用绝对定位。

图片不能包含儿童。（之前有可能，但现在不可能）

评论说“使用绝对定位＆＃39;如果你使用绝对定位，并不意味着你可以包含孩子。

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

Answer 3

由于错误建议在要放置在图像上方的项目处使用position: absolute。

我的示例是HTML格式，但应该类似。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: