Компонент рендеринга выше фонового изображения с наложением

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