React Native 환경 구축 강좌
환경 구축
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 의 주요 논리 코드 는 서버 쪽 자 바스 크 립 트 에 있 기 때문에 새로 고침 할 때마다 서버 의 최신 코드 를 끌 어 와 사용자 인 터 페 이 스 를 다시 렌 더 링 한 다 는 것 이다.
물론 현재 언급 된 전체 과정 은 개발 단계 에서 만 생산 환경 에서 자 유 롭 고 자바 스 크 립 트 파일 의 저장 은 서버 와 클 라 이언 트 사이 에서 선택 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.