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

使用叠加层渲染背景图像上方的组件

1 个答案: