React Native

React Native의 기본 레이아웃

고줭 2022. 4. 6. 18:03

<View>의 경우 기본적으로 display: flex; 가 적용됐다고 생각하면된다.
|브라우저의 경우 flex-direction: row; 인 반면 RN에서는 flexDirection: column임

import { View } from "react-native";

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

크기조정을 width: 100px; height: 200px;식으로 조정하지 않고 flex: 숫자 같이 정의해서 사용