如何在 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

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 2

您的错误显示您需要将 Image 设置为 absolute 位置，以避免这个你可以使用 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')} 
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 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;

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

How to set an image as background of a Form in React Native?

styles

background-image

react-native