react native는 웹사이트가 아니다.
HTML이 아니기 때문에 div를 쓸 수 없고, View를 써야됨.
(항상 import해야됨 - import { StyleSheet, Text, View } from 'react-native')
View는 container임.
react native에 있는 모든 text는 text component에 들어가야 함.
View에 style이 있고, 원하는대로 styles 가능.
이건 웹의 react.js에서 할 수 있는 것과 비슷함. (하지만 전부는x)
StyleSheet.create는 object를 생성하는 데 사용함.
이유1) 아주 좋은 자동 완성 기능 제공
이유2) 따로 빼줌으로서 style이 거대해지는 걸 방지 (따라서 일반적으로 스타일을 StyleSheet에 구분하고, component를 위에 써줌)
status bar(상태표시줄)는 (시계, 인터넷, 배터리 등을 표시, 운영체제와 소통하는 component라는 증거)
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello! I made a Seongjun App!</Text>
<StatusBar style='auto' />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 40,
color: 'red'
},
});