React Native 레이아웃

 

React Native에서 레이아웃은 Flexbox를 사용

- display 블럭이 없음 

 

 

기본 설정

import React from "react";
import { View } from "react-native";

export default function App(){
  return (
    <View>
      <View></View>
    </View>
  );
}

 

 

import React from "react";
import { View } from "react-native";

export default function App(){
  return (
    <View style={{ flexDirection : "row"}}>
      <View style={{width:100, height: 100, backgroundColor:"tomato"}}></View>
      <View style={{width:100, height: 100, backgroundColor:"teal"}}></View>
      <View style={{width:100, height: 100, backgroundColor:"orange"}}></View>
    </View>
  );
}

 

결과로 볼 수 있듯이 웹에서는 Flex Direction의 기본값은 Row이지만, 모바일에서 Flex Direction의 기본값은 Column이다.

 

 

import React from "react";
import { View } from "react-native";

export default function App(){
  return (
    <View style={{ flex:1}}>
      <View style={{flex:1,backgroundColor:"tomato"}}></View>
      <View style={{flex:1,backgroundColor:"teal"}}></View>
      <View style={{flex:1,backgroundColor:"orange"}}></View>
    </View>
  );
}

 

비율만을 사용

 

이 3개의 View가 크기가 동일하게 조절한다는 이야기

포개진 View가 부모임 부모를 기준으로 자식이 몇배 상승한다는 말 - 부모에 flex : 1을 해준 이유