Published on

React Native

Authors
  • avatar
    Name
    Inhwan Cho
    Twitter

install

  • expo go를 통해 사용자의 휴대폰으로 화면 확인.
  1. 휴대폰으로 expo go 어플리케이션 다운로드

  2. expo.dev 에서 회원 가입

  3. 아래의 명령어를 실행

npx create-expo-app my-app

cd my-app

# expo 아이디/ 비밀번호 로그인 (없으면 가입)
npx expo login

npm start
# npm run start
  1. 휴대폰에서 expo go를 실행하고 Home에서 실행 중인 프로젝트 실행.

만약, 실행 로딩이 오래 걸린다면 npx expo start --tunnel 명령어 실행.

또는, Snack 에서 시뮬레이션 및 코딩 연습도 가능

React Native의 기본 지식

  • HTML이 아니다. => div 태그 등 html의 태그를 사용 할 수 없고 유사한 태그를 사용해야함
div = View
  • 모든 text는 <TEXT>here</TEXT> TEXT 태그에 담아서 사용해야함.

  • React Native에서 제공해주는 API 및 Components는 유지보수가 힘들어서 양이 적고, 대부분 expo(react native community)에서 찾아서 사용해야함.

  • display:flex; flex-direction:column;이 기본값이다. display:block은 없음

  • 반응형 사이즈를 고려해서 width나 height을 잘 사용하지 않고, 부모 태그와 자식 태그의 flex:1처럼 비율 단위로 코딩을 하는게 일반적임.

  • StyleSheet.create을 사용하는 이유는 단순히 자동 완성 기능 때문이다.