如何在本机反应中使总视图居中

Question

我是本机反应新手，我创建了一个示例登录表单。在这种形式中，我想将总视图对齐到中心。我尝试了这种方法但不起作用，你能指导我如何实现这一目标吗？

我的登录类是

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

export default class Login extends Component{

    render(){
        return(
            <View style={styles.container}> 
                <TextInput style={styles.textInput} placeholder="Acc No/User ID"/>
               <TextInput style={styles.textInput} placeholder="Password"/>
              <TouchableOpacity style={styles.btn} onPress={this.login}><Text>Log In</Text></TouchableOpacity> 

            </View>
        );
    }

    login=()=>{
        alert("testing......");
        // this.props.navigation.navigate('Second');
    }
}

AppRegistry.registerComponent('Login', () => Login);


const styles = StyleSheet.create({


  container:{
    justifyContent: 'center',
    alignItems: 'center',
  },

  header: {
      fontSize: 24,
      marginBottom: 60,
      color: '#fff',
      fontWeight: 'bold',
  },
  textInput: {
      alignSelf: 'stretch',
      padding: 10,
      marginLeft: 80,
      marginRight:80,
  },
  btn:{
      alignSelf: 'stretch',
      backgroundColor: '#01c853',
      padding: 10,
      marginLeft: 80,
      marginRight:80,
      alignItems: 'center',
  }


});

以下是上述代码的屏幕截图。

我尝试使用下面的代码，但不起作用

container:{
    justifyContent: 'center',
    alignItems: 'center',
    flex:1
  },

所以请帮助我，该怎么做？提前致谢..

Answer 1

使用柔性显示：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

export default class Login extends Component {

  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.textInput} placeholder="Acc No/User ID" />
        <TextInput style={styles.textInput} placeholder="Password" />
        <TouchableOpacity style={styles.btn} onPress={this.login}><Text>Log In</Text></TouchableOpacity>

      </View>
    );
  }

  login = () => {
    alert("testing......");
    // this.props.navigation.navigate('Second');
  }
}

AppRegistry.registerComponent('Login', () => Login);


const styles = StyleSheet.create({


  container: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  header: {
    fontSize: 24,
    color: '#fff',
    fontWeight: 'bold',
  },
  textInput: {
    padding: 10,
    textAlign: 'center',
  },
  btn: {
    backgroundColor: '#01c853',
    paddingVertical: 10,
    paddingHorizontal: 50,
  }
});

顺便说一句，您可以通过简单的搜索轻松找到答案（垂直中心视图react-native）： https: //moduscreate.com/blog/aligning-children-using-flexbox-in-react-native/