使用叠加层在背景图像上方渲染组件答案

【问题标题】：Rendering component above background image with overlay使用叠加层在背景图像上方渲染组件
【发布时间】：2016-10-16 10:59:56
【问题描述】：

我的问题是我无法让组件显示在背景图像上方。

我已阅读有关布局属性和其他相关 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 属性修复的东西，因为否则它通常足以显示一个属性，足以使第一个属性出现在第二个之上。

【问题讨论】：

标签： android css react-native hybrid-mobile-app

【解决方案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);

【讨论】：