react native 가운데 정렬

* 상황 - 로그인 화면을 구현하는데 가운데 정렬하고 싶어졌다.

 

* 해결

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  login: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

class Login extends Component {
  render() {
    return (
      <View style={styles.login}>
        <Text> Login </Text>
      </View>
    );
  }
}

export default Login;

위와 같이 코드를 지정해주면 됨.

- alignItems : 가로 가운데 정렬

- justifyContent : 세로 가운데 정렬

 

* 주의할 점

flex로 항목들을 배열했을 경우 뷰의 내부에서만 가운데 정렬이 된다.

 

전체 코드는 https://github.com/jejecrunch/dalguri-calendar/blob/master/src/components/Home.js