Невозможно центрировать форму входа в React Native

Question

Я пытаюсь центрировать форму входа в систему React Native, для этого я обернул TextInput и TouchableOpacity в теге View и назначил соответствующие свойства тегу View, но он не помещает всю форму в центр. Кроме того, размер элементов формы также уменьшается .

Ниже мой код:

Приложение. js

import React, { Component } from 'react';
import Signup from './components/Signup';
import { View,Text, StyleSheet } from 'react-native';

const App = () => {

  return(

 <View>
   <Text style={styles.head}>Register here</Text> 

   <Signup/>
 </View>
);

}

export default App;

const styles = StyleSheet.create({

 head:{
   color:'blue',
   fontWeight:'bold',
   textAlign:'center',
   marginTop:20,
   fontSize:25
 }
});

Регистрация. js

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

class Signup extends Component{

state={
    name:'',
    password:''
}

handleName = (name) => {

    this.setState({name:name})      
}

handlePwd = (pwd) => {

    this.setState({password:pwd})
}

alertMsg = (name,pwd) => {

    alert(name + " " + pwd);
}

render(){

    return(

        <View>

            <View style={styles.layout}>  

            <TextInput style={styles.input}
                       placeholder='Name'
                       onChangeText={this.handleName}/>

            <TextInput style={styles.input}
                       placeholder='Password'
                       secureTextEntry={true}
                       onChangeText={this.handlePwd}/>

            <TouchableOpacity
              style={styles.buton}
              onPress={() => this.alertMsg(this.state.name,this.state.password)}>
                  <Text style={styles.submit}>SUBMIT</Text>
            </TouchableOpacity> 

            </View>

        </View>
     );
   }

}

export default Signup;

const styles = StyleSheet.create({

layout:{
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center'
},
   input:{
       marginTop:20,
       borderColor:'blue',
       borderRadius:3,
       borderWidth:1,
       paddingLeft:10
   },
   submit:{
       textAlign:'center',
       color:'white',
       padding:15,
       fontWeight:'bold'
   },
   buton:{
       backgroundColor:'blue',
       borderRadius:3,
       marginTop:20
   }
});

Вот результат:

Кто-нибудь, дайте мне знать, как я могу получить желаемый результат. Любая помощь будет оценен.

СПАСИБО

Answer 1

Вам не нужен View, чтобы обернуть ваш основной контейнер, и макет должен иметь flex: 1, чтобы занять все пространство. Для текстовых полей вы можете указать ширину в процентах, как в приведенном ниже коде.

Вот код для рендеринга и стилей.

  render() {
    return (
      <View style={styles.layout}>
        <TextInput
          style={styles.input}
          placeholder="Name"
          onChangeText={this.handleName}
        />

        <TextInput
          style={styles.input}
          placeholder="Password"
          secureTextEntry={true}
          onChangeText={this.handlePwd}
        />

        <TouchableOpacity
          style={styles.buton}
          onPress={() => this.alertMsg(this.state.name, this.state.password)}>
          <Text style={styles.submit}>SUBMIT</Text>
        </TouchableOpacity>
      </View>
    );
  }


const styles = StyleSheet.create({
  layout: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  input: {
    marginTop: 20,
    borderColor: 'blue',
    borderRadius: 3,
    borderWidth: 1,
    paddingLeft: 10,
    width: '70%',
  },
  submit: {
    textAlign: 'center',
    color: 'white',
    padding: 15,
    fontWeight: 'bold',
  },
  buton: {
    backgroundColor: 'blue',
    borderRadius: 3,
    marginTop: 20,
  },
});