[React Native] Layout system

RN에서는 Flexbox를 사용한다.

주의

Flexbox는 웹의 CSS에서와 같은 방식으로 리액트 네이티브에서 몇 가지 예외를 제외하고 작동합니다. 기본값은 다릅니다. flexDirection이 행 대신 열로 기본 설정되어 있고, alignContent가 stretch 대신 flex-start로 기본 설정되어 있고, flexShrink가 1 대신 0으로 기본 설정되어 있으며, flex parameter는 단일 숫자만 지원합니다.

참조 : https://reactnative.dev/docs/flexbox 

Layout with Flexbox · React Native

width, height 사용가능 하지만 모바일 레이아웃은 다양한 스크린 사이즈가 있다. 

고정적인 픽셀값을 사용하면 반응형이 아니지..

그래서 RN에서는 flex 파라미터 값을 사용한다.

import React from 'react';
import {StyleSheet, View} from 'react-native';

const Flex = () => {
  return (
    <View
      style={[
        styles.container,
        {
          // Try setting `flexDirection` to `"row"`.
          flexDirection: 'column',
        },
      ]}>
      <View style={{flex: 1, backgroundColor: 'red'}} /> // 콘테이너 내부의 레이아웃 비율 
      <View style={{flex: 2, backgroundColor: 'darkorange'}} /> // flex 파라미터의 값에 따라 
      <View style={{flex: 3, backgroundColor: 'green'}} /> // 비율이 달라짐
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // 콘테이너의 화면의 비율
    padding: 20,
  },
});

export default Flex;