import {StatusBar} from "expo-status-bar";
import React from "react";
import {StyleSheet, Text, View} from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Open asdasdup App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
StyleSheet.create를 사용하지 않고 style 오브젝트를 만들 수는 있지만 , 사용하지 않으면 자동완성이 되지 않아 불편하다.
<StatusBar style="auto" />
StatusBar를 rendering 하고 있지만 화면에는 표시되지 않는 것을 볼 수 있다.
이것이 reactJS 와 아주 큰 차이이다.
몇몇 Component는 ios 또는 andriod 운영체제와 소통하기 위한 매개체 이다.
위의 StatusBar 컴포넌트는 운영체제에게 상태바에 대한 설명을 하고 있는 중이다.
그리고 잘 보면 StatusBar 는 react-native 패키지에서 import 해오지 않는다.
과거에는 지원했지만 현제 버전에서는 지원해주지 않는다.
초기 react team은 개발자에게 가능한 많은 기능을 지원해주고 싶었지만 , 많은 기능은 많은 오류를 수반한다는 것을 깨닫고 기본적으로 제공하는 컴포넌트의 수를 줄였다. (물론 빠른 속도와 용량을 고려한 문제가 크다 )
그래서 공식문서에도 보면 오픈 소스 패키지를 사용하라고 명시되어 있다.
그치만 오픈 소스 패키지를 사용하는 것보다 꾸준히 업데이트해 주는 expo 패키지를 사용하는 것이 좋다.
큰 틀은 3가지이다.
박스들의 크기 설정 방법은 비율적으로 분활하는 것이다.