オーバーレイで背景画像の上にレンダリングするコンポーネント

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

そうでなければ、最初のものを第2のものの上に見るのに十分な範囲内で1つのプロパティを表示するのに十分なので、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);