如何在React Native中将图像设置为表单的背景？

Question

我一直在制作一个表格，我需要获得背景图像，使其看起来更漂亮。当我在图像标签内使用表单组件时，它显示以下错误   

我给出了我用过的代码

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 >
       <Image source={require('../drawable/Auntie.jpeg')}
         width={width}
         height={height} >
        {this.props.children}
       </Image>        
     </View>    
   );
 }
}

export default DearImage;

Answer 1

您的错误显示您需要将图片设置为绝对位置，为避免这种情况您可以使用 ImageBackground 。和图片标记无法直接显示任何子标记，使用视图使用如下代码，它将起作用为你

 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 ( 

<ImageBackground 
 source={require('../drawable/Auntie.jpeg')} 
style={{ 
backgroundColor: '#ccc', 
flex:1, 
width: '100%', 
height: '100%', 
justifyContent: 'center', 
}} > 

<View style={{flex:1,position:"absolute", backgroundColor: 'transparent', }}> 
{this.props.children} 
</View> 
</ImageBackground > 

) 
} 
} 

export default DearImage;

Answer 2

render() {
    return (
        <View>
        <Image source={require('../drawable/Auntie.jpeg')}
               width={width}
               height={height}>                            
        </Image>  
        <View style={{flex:1,position:"absolute"}}> 
               {this.props.children}
        </View>
        </View>
      )
}

Answer 3

使用ImageBackground而不是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 (
        <ImageBackground source={require('../drawable/Auntie.jpeg')}
          width={width}
          height={height}
          style = {{flex:1}}>
            {this.props.children}
        </ImageBackground>        
    )
}
}

export default DearImage;