[React-Native] The Rules of Native

조수진·2023년 7월 2일
  1. react native는 웹사이트가 아니다.
    HTML이 아니기 때문에 div를 쓸 수 없고, View를 써야됨.
    (항상 import해야됨 - import { StyleSheet, Text, View } from 'react-native')
    View는 container임.

  2. react native에 있는 모든 text는 text component에 들어가야 함.

  3. View에 style이 있고, 원하는대로 styles 가능.
    이건 웹의 react.js에서 할 수 있는 것과 비슷함. (하지만 전부는x)

  4. StyleSheet.create는 object를 생성하는 데 사용함.
    이유1) 아주 좋은 자동 완성 기능 제공
    이유2) 따로 빼줌으로서 style이 거대해지는 걸 방지 (따라서 일반적으로 스타일을 StyleSheet에 구분하고, component를 위에 써줌)

  5. 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'
  },
});
profile
꾸준함의 힘을 믿는 프론트엔드 개발자

0개의 댓글