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/

Answer 2

只需将flex：1添加到您的容器样式

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

Answer 3

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


class App extends Component{
    state = {
        userId:'',
        password:'',
    };

    render(){
        return(
            <View style={styles.container}>
                    <View>
                        
                    </View>
                    <View>
                        <TextInput 
                        placeholder="User ID"
                        style={styles.loginTextInput}
                        onChangeText={(value) => this.setState({userId: value})}
                        value={this.state.userId}
                        ></TextInput>
                        <TextInput
                            placeholder="Password"
                            style={styles.loginTextInput}
                            onChangeText={(value)=>this.setState({password:value})}
                        ></TextInput>
                        <Button 
                            title="Login"
                            style={styles.loginBtn}
                            onPress={this.loginCheck}
                        ></Button>
                    </View>
            </View>
        )
    }
    loginCheck=()=>{
        if((this.state.userId=='admin') && (this.state.password=='admin')){
            Alert.alert("Login Success");
        }else{
            Alert.alert("User and password is not match\n Please try again");
        }
    }
}





export default App;

const styles  = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
    },

    loginTextInput:{
        borderColor:'#ebe9e6',
        borderWidth:1,
        margin:5,

    },

    loginBtn:{
        backgroundColor: '#01c853',
        paddingVertical: 10,
        paddingHorizontal: 50,
    }
    
})

如何在React Native中使总视图居中

3 个答案: