오버레이로 배경 이미지 위의 렌더링 구성 요소

Question

내 문제는 구성 요소가 배경 이미지 위에 표시되도록 할 수 없다는 것입니다.

나는 레이아웃 속성과 질문 SO 기타 관련에 대해 읽었습니다하지만 내 이해의 구현은 아래 올바른지에 있지만 내 프로젝트에 대한 작업을 할 수없는 것 : 뭔가가 있어야 상상

import React, { Component } from 'react'; 
import { AppRegistry, Image, TextInput, StyleSheet, View } from 'react-native'; 

let styles = StyleSheet.create({ 

    backgroundImage: { 
    top: -150, 
    left: -275 
    }, 

    dimOverlay: { 
    flex: 1, 
    opacity: 0.5, 
    backgroundColor: 'black', 
    }, 

    loginForm: { 
    } 
}); 

class LoginForm extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render(){ 
    return (
     <View> 
     <TextInput autoCorrect={false} defaultValue='asdf'/> 
     <TextInput autoCorrect={false} /> 
     </View> 
    ) 
    } 

} 

class Background extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Image source={require('./img/login_screen.jpg')} style={styles.backgroundImage}> 
      <View style={styles.dimOverlay} /> 
     </Image> 
    ); 
    } 
} 

class LoginScreen extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Background> 
     <LoginForm/> 
     </Background> 
    ); 
    } 
} 

AppRegistry.registerComponent('AwesomeProject',() => LoginScreen); 

그렇지 않으면 대개 첫 번째 속성을 두 번째 속성 위에 표시 할 수있을만큼 충분한 속성을 표시하기에 충분하기 때문에 CSS 속성으로 수정되었습니다.

Answer 1

대신이 시도 :

import React, { Component } from 'react'; 
import { AppRegistry, Image, TextInput, StyleSheet, View } from 'react-native'; 

let styles = StyleSheet.create({ 

    backgroundImage: { 
    top: -150, 
    left: -275 
    }, 

    dimOverlay: { 
    flex: 1, 
    opacity: 0.5, 
    backgroundColor: 'grey', 
    }, 

    loginForm: { 
    } 
}); 

class LoginForm extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render(){ 
    return (
     <View style={{flex:1, justifyContent:'center'}}> 
     <TextInput autoCorrect={false} defaultValue='asdf' style={{ height: 40, borderColor: 'black', borderWidth: 1}}/> 
     <TextInput autoCorrect={false} defaultValue='ghjk' style={{height: 40, borderColor: 'black', borderWidth: 1}}/> 
     </View> 
    ) 
    } 

} 

class LoginScreen extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Image source={require('./img/login_screen.jpg')} > 
     <View style={styles.dimOverlay}> 
     <LoginForm/> 
     </View> 
     </Image> 


    ); 
    } 
} 

AppRegistry.registerComponent('AwesomeProject',() => LoginScreen);