React Native Layout

React Native를 공부할 때, 참고할 수 있는 문서는 아래와 같다. 

https://reactnative.directory

 

expo는 많은 라이브러리 제공해준다. 

React Native에서 제공해줄 수 없는 부분까지 말이다.

https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/

AsyncStorage - Expo Documentation

---

React Native 레이아웃에 대해서 알아보자.

React Native를 하면서 레이아웃을 만들 때는 Container의 style 크기를 width, height로 설정하지 않고,

flext를 사용해서 레이아웃 비율을 설정해주는 방식을 많이 사용한다.

(React Native에서 말하는 Container는 View로 사용된다.) 

import * as React from 'react';
import { Text, View, StyleSheet } 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>
  );
}

 

위의 코딩에 대한 결과이다.

한 번 자식의 Container의 크기를 조금씩 변경해서 결과를 확인해보자.

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

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

 

위의 코딩에 대한 결과이다.

---

부모의 Container의 크기는 flex: 1로 고정해준다. 

 

부모의 Container의 크기는 flex: 1로 고정해주는 이유는 간단하면서도 중요하다.

(부모의 Container) X (자식의 Container) 한 값이 레이아웃 비율이라고 생각하면 된다.

즉, 부모의 Container가 없어지면 자식의 비율을 아무리 늘려도 0을 곱하는 것이기 때문에 빈 하얀색 창으로 뜰 것이다.

 

✔그러면 부모의 Container flex를 3으로 고정해주면 안되나요?

해줘도 상관없다.
그러나 어차피 모든 자식한테 3을 곱해주는 꼴이기 때문에 결국 1을 곱하나 100을 곱하나 결과는 동일할 것이다.

---

이번에는 레이아웃의 방향을 정렬하는 방법을 알아보자.

기본적으로, React Native에서 Flex 되어있는 Container의 Direction의 기본 값은 Column이다.

즉, 수평으로 이미 설정이 되어있기 때문에 설정을 주어 셋팅하게 되는 경우는 수직으로 설정하고 싶은 경우이라고 생각하면 된다,.

수직으로 설정하는 방법은 flexDriection: "row" 라는 설정 값을 주면 된다.

해당 설정 값은 당연히 부모의 Container style에 셋팅해줘야한다. 

테스트 해본 코드는 아래와 같다.

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

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

위의 코딩에 대한 결과이다.