React Native-환경 설정

React Native의 환경을 설정하기 위해 설치해야 할 몇 가지 사항이 있습니다. 우리는 건물 플랫폼으로 OSX를 사용할 것입니다.

Sr. 아니.	소프트웨어	기술
1	NodeJS 및 NPM	NodeJS 환경 설정 튜토리얼을 따라 NodeJS 를 설치할 수 있습니다.

1 단계 : create-react-native-app 설치

시스템에 NodeJS 및 NPM을 성공적으로 설치 한 후 create-react-native-app 설치를 진행할 수 있습니다 (아래에 표시된대로 전역).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

2 단계 : 프로젝트 만들기

필요한 폴더를 탐색하고 아래와 같이 새 반응 네이티브 프로젝트를 만듭니다.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

위의 명령을 실행하면 다음과 같은 내용으로 지정된 이름의 폴더가 생성됩니다.

3 단계 : NodeJS Python Jdk8

시스템에 Python NodeJS 및 jdk8이 설치되어 있는지 확인하고 설치하십시오. 이 외에도 특정 문제를 피하기 위해 최신 버전의 원사를 설치하는 것이 좋습니다.

4 단계 : React Native CLI 설치

아래와 같이 install -g react-native-cli 명령을 사용하여 npm에 react 네이티브 명령 줄 인터페이스를 설치할 수 있습니다.

npm install -g react-native-cli

5 단계 : React Native 시작

설치를 확인하려면 프로젝트 폴더를 찾아보고 시작 명령을 사용하여 프로젝트를 시작해보십시오.

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

모든 것이 잘되면 아래와 같이 QR 코드를 받게됩니다.

지침에 따라 Android 기기에서 React 네이티브 앱을 실행하는 한 가지 방법은 expo를 사용하는 것입니다. 안드로이드 장치에 엑스포 클라이언트를 설치하고 위에서 얻은 QR 코드를 스캔하십시오.

6 단계 : 프로젝트 꺼내기

Android Studio를 사용하여 Android 에뮬레이터를 실행하려면 다음을 눌러 현재 명령 줄에서 나오십시오. ctrl+c.

그런 다음 실행을 실행하십시오. eject command 같이

npm run eject

이렇게하면 꺼낼 수있는 옵션이 표시되고 화살표를 사용하여 첫 번째 항목을 선택한 다음 Enter 키를 누릅니다.

그런 다음 홈 화면에 앱 이름과 Android 스튜디오 및 Xcode 프로젝트의 프로젝트 이름을 제안해야합니다.

프로젝트가 성공적으로 배출되었지만 다음과 같은 오류가 발생할 수 있습니다.

이 오류를 무시하고 다음 명령을 사용하여 android 용 react native를 실행하십시오.

react-native run-android

그러나 그 전에 안드로이드 스튜디오를 설치해야합니다.

7 단계 : Android Studio 설치

웹 페이지 방문 https://developer.android.com/studio/ Android 스튜디오를 다운로드하십시오.

설치 파일을 다운로드 한 후 더블 클릭하여 설치를 진행합니다.

8 단계 : AVD Manager 구성

AVD Manager를 구성하려면 메뉴 모음에서 해당 아이콘을 클릭합니다.

9 단계 : AVD Manager 구성

기기 정의를 선택하세요. Nexus 5X가 권장됩니다.

다음 버튼을 클릭하면 시스템 이미지 창이 나타납니다. 선택x86 Images 탭.

그런 다음 Marshmallow를 선택하고 다음을 클릭하십시오.

마지막으로 마침 버튼을 클릭하여 AVD 구성을 완료합니다.

가상 장치를 구성한 후 Actions 열 아래의 재생 버튼을 클릭하여 Android 에뮬레이터를 시작합니다.

10 단계 : Android 실행

명령 프롬프트를 열고 프로젝트 폴더를 검색 한 다음 react-native run-android 명령.

그런 다음 앱 실행이 상태를 확인할 수있는 다른 프롬프트에서 시작됩니다.

Android 에뮬레이터에서 기본 앱의 실행을 다음과 같이 볼 수 있습니다.

11 단계 : local.properties

열기 android 프로젝트 폴더의 폴더 SampleReactNative/android(이 경우). 이름이 지정된 파일 만들기local.properties 다음 경로를 추가하십시오.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

여기, 교체 Tutorialspoint 사용자 이름으로.

12 단계 : 핫 리로딩

그리고 응용 프로그램을 빌드하기 위해 App.js를 수정하면 변경 사항이 Android 에뮬레이터에서 자동으로 업데이트됩니다.

그렇지 않은 경우 Android 에뮬레이터를 클릭하십시오. ctrl+m 그런 다음 Enable Hot Reloading 선택권.