React Native 환경 구축 강좌

RN 에 대한 궁금 증 으로 가득 차 있 었 고,얼마 전 RN 을 배우 고 실제로 사용 해 간단 한 애플 리 케 이 션 을 개발 했다.첫 번 째 단 계 는 환경 구축 부터 시작한다.
환경 구축
Node,Watchman,Yarn,RN 명령 행 도 구 를 각각 설치 해 야 합 니 다.react-devtools 의 debug 도구 도 함께 설치 하 는 것 을 추천 합 니 다.

$ brew install node

$ brew install watchman

$ brew install yarn

$ npm install -g react-native-cli

$ npm install -g react-devtools   // debug  ，  

응용 프로그램 만 들 기
다음 명령 만 실행 하면 AwesomeProject 라 는 RN 프로젝트 를 만 들 수 있 습 니 다.

react-native init AwesomeProject

RN 버 전 번 호 를 지정 할 수도 있 고,

react-native init AwesomeProject --version 0.47.0

이 명령 은 npm 관리 의존 파일 인 package.json 파일 을 만 듭 니 다.이 파일 에 서 는 dependencies 에 명 시 된 react 와 RN 버 전 을 반드시 맞 춰 야 합 니 다.한 번 생 성 된 프로젝트 의 운행 이 항상 잘못 되 어 이해 할 수 없 었 고 마지막 에 버 전이 일치 하지 않 아서 생 긴 것 을 발견 했다.버 전 번 호 를 묵묵히 수정 하고 npm install 을 실행 해 야 해결 할 수 있 습 니 다.

{

 "name": "AwesomeProejct",

 "version": "1.0.0"

 "private": true,

 "scripts": {

  "start": "node node_module/react-native/local-cli/cli.js start"

 },

 "dependencies": {

//  "react": "^15.6.1", // was installed by npm but not matched

  "react": "^16.0.0-alpha.12", // correct dependency version for react

  "react-native": "^0.47.0"

 }

}

관리 파일 에 의존 하 는 것 외 에 ios 와 android 두 개의 디 렉 터 리 가 네 이 티 브 코드 를 저장 하고 초기 화 된 JavaScript 파일 템 플 릿 도 있 습 니 다.나중에 사용 할 것 이 므 로 일일이 열거 하지 않 습 니 다.
첫 운행
첫 번 째 실행 은 환경 이 정확 하고 간단 한 피드백 을 검사 하 는 데 사 용 됩 니 다.플랫폼 에 따라 다음 명령 을 실행 합 니 다.

$ react-native run-ios
or
$ react-native run-android

Android 는 시 뮬 레이 터 를 미리 시작 하거나 실제 컴퓨터 에 연결 해 야 하 며 iOS 는 시 뮬 레이 터 를 자동 으로 시작 합 니 다.아래 의 이 화면 을 보면 환경의 구축 을 완 성 했 음 을 축하 하고 응용 층 의 개발 을 시작 할 수 있 습 니 다.

RN First Launch
시작 과정
여기 서 끝 내 는 것 도 괜 찮 지만,이후 RN 애플 리 케 이 션 개발 에 빠르게 진입 할 수 있 도록 설명해 야 할 문제 가 하나 더 있다.앞에서 언급 한 시작 명령 과 같이 두 단계 로 분해 할 수 있 습 니 다.
단계 1.서버 시작
한 단 계 는 개발 서버 를 시작 하 는 것 입 니 다.실행 에 필요 한 자바 스 크 립 트 파일 을 제공 하 는 것 입 니 다.물론 아래 명령 으로 따로 시작 할 수도 있 습 니 다.

npm start

서 비 스 는 로 컬 8081 포트 를 사용 합 니 다.이 포트 가 점용 되면 다음 두 명령 을 순서대로 실행 하여 포트 를 점용 하 는 프로 세 스 를 끝내 야 합 니 다.

$ sudo lsof -i :8081
$ kill -9 <PID>

STEP 2.이동 단 시작
또 다른 단 계 는 모 바 일 네 이 티 브 코드 를 컴 파일 하고 설치 하 는 것 으로 평소 네 이 티 브 모 바 일 애플 리 케 이 션 을 개발 하 는 것 과 같다.플랫폼 각자 의 디 렉 터 리 에서 ios 나 android 를 IDE 로 열 고 컴 파일 하여 실행 할 수도 있 습 니 다.
시작 이 완료 되 고 위 에 있 는 캡 처 화면 을 보면 모 바 일 프로그램 을 반복 적 으로 컴 파일 하고 시작 하지 않 아 도 됩 니 다.코드 수정 때마다 시 뮬 레이 터 에서 알림 을 누 르 고 새로 고침 하면 수정 내용 을 볼 수 있 습 니 다.RN 의 주요 논리 코드 는 서버 쪽 자 바스 크 립 트 에 있 기 때문에 새로 고침 할 때마다 서버 의 최신 코드 를 끌 어 와 사용자 인 터 페 이 스 를 다시 렌 더 링 한 다 는 것 이다.
물론 현재 언급 된 전체 과정 은 개발 단계 에서 만 생산 환경 에서 자 유 롭 고 자바 스 크 립 트 파일 의 저장 은 서버 와 클 라 이언 트 사이 에서 선택 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.