[React] flex에 대하여 (반응형 레이아웃 만들기)

 

 

flexDirection
웹	row
react native	column

 
 

import { StatusBar } from 'expo-status-bar';
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 : 2, backgroundColor:"teal"}}>
      </View>
      <View 
      style={{ flex : 1, backgroundColor:"orange"}}>
      </View>
    </View>
 
);

}

 

 

import { StatusBar } from 'expo-status-bar';
import React from "react"
import {View} from 'react-native';

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

}

 

부모의 flex 수치는 자식들의 flex값의 기준이 되는 값이다 
( 즉 값이 변경되어도 자식들의 크기은 변화 이상 무 . ) 
자식들의 flex 수치를 바꾸면 width, height 값을 구체적으로 지정하지 않아도 레이아웃에 맞게 반응형으로 크기가 바뀜!