React Native中如何为表单设置背景图片？嵌套组件报错求助

嘿，我明白你碰到的麻烦了！在React Native里，Image组件本身是不支持嵌套任何子元素的，这就是你把表单组件放在<Image>标签里会报错的核心原因。官方为这类“背景图+上层内容”的场景专门提供了ImageBackground组件，它才是用来承载子组件的正确选择。

具体修改方案： #

• 直接将你代码里的<Image>替换为<ImageBackground>
• ImageBackground的属性（比如source、width、height）用法和Image完全一致，但它允许你在内部嵌套子组件（比如你的表单）

修改后的完整代码： #

import React, { Component } from 'react'
import { Image, View, Dimensions, ImageBackground } from 'react-native'

let { height, width } = Dimensions.get('window')

class DearImage extends Component {
  render() {
    return (
      <View>
        <ImageBackground 
          source={require('../drawable/Auntie.jpeg')} 
          style={{ width: width, height: height }}
        >
          {this.props.children}
        </ImageBackground>
      </View>
    );
  }
}

export default DearImage;

另外补充个小细节：建议把width和height放到style属性里，这是React Native组件更规范的写法哦。

内容的提问来源于stack exchange，提问作者Harikrishnan S