react-native 튜토리얼
반응 네이티브 시작하기

비고

Mac 용 설정

패키지 관리자 설치 자작 brew

터미널 프롬프트에 붙여 넣으십시오.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Xcode IDE 설치하기

아래 링크를 사용하여 다운로드하거나 Mac App Store에서 찾으십시오.

https://developer.apple.com/download/

참고 : 프로덕션 버전의 Xcode.app 와 함께 Xcode-beta.app가 설치되어있는 경우 프로덕션 버전의 xcodebuild 도구를 사용하고 있는지 확인하십시오. 다음과 같이 설정할 수 있습니다.

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Android 환경 설치

• 망할 놈의 git

  * Xcode를 설치했다면, Git은 이미 설치되어 있고, 그렇지 않으면 다음과 같이 실행됩니다.

  brew install git 
  

• 최신 JDK

• Android Studio

  사용자 정의 설치 선택

  

  성능 및 Android 가상 장치 모두 선택

  

  설치가 끝나면 Android Studio 환영 창에서 구성 -> SDK 관리자를 선택하십시오.

  

  SDK 플랫폼 창에서 패키지 세부 정보 표시를 선택하고 Android 6.0 (Marshmallow)에서 Google API, Intel x86 Atom 시스템 이미지, Intel x86 Atom_64 시스템 이미지 및 Google API Intel x86 Atom_64 시스템 이미지가 선택되어 있는지 확인하십시오.

  

  SDK 도구 창에서 패키지 세부 정보 표시를 선택하고 Android SDK 빌드 도구 아래에서 Android SDK 빌드 도구 23.0.1이 선택되어 있는지 확인합니다.

  

• 환경 변수 ANDROID_HOME

  ANDROID_HOME 환경 변수가 기존 Android SDK를 가리키는 지 확인하십시오. 그렇게하기 위해 ~ / .bashrc, ~ / .bash_profile (또는 쉘이 사용하는 모든 것)에 이것을 추가하고 터미널을 다시 엽니 다 :

  Android Studio없이 SDK를 설치 한 경우 다음과 유사 할 수 있습니다. / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Mac 용 종속성

iOS 용 Xcode, android 용 node.js, React Native 명령 줄 도구 및 Watchman이 필요한 Android Studio가 필요합니다.

Homebrew를 통해 node와 watchman을 설치하는 것이 좋습니다.

brew install node
brew install watchman

워치 만 (Watchman) 은 페이스 북의 도구로 파일 시스템의 변화를 감시합니다. 성능 향상을 위해 설치하는 것이 좋습니다. 선택 사항입니다.

Node는 npm과 함께 제공되며 React Native 명령 행 인터페이스를 설치할 수 있습니다.

npm install -g react-native-cli

권한 오류가 발생하면 sudo를 사용해보십시오.

sudo npm install -g react-native-cli.

iOS의 경우 Xcode를 설치하는 가장 쉬운 방법은 Mac App Store를 이용하는 것입니다. Android Studio를 다운로드하고 Android Studio를 설치합니다.

Java 코드를 변경하려면 Gradle Daemon을 사용하여 빌드 속도를 높일 것을 권장합니다.

귀하의 React 네이티브 설치 테스트

React Native 명령 줄 도구를 사용하여 "AwesomeProject"라는 새로운 React Native 프로젝트를 생성 한 다음 새로 생성 된 폴더에서 Reactive-native Run-Ios를 실행합니다.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

잠시 후에 iOS 시뮬레이터에서 실행중인 새 앱을 보셔야합니다. react-native run-ios는 앱을 실행하는 한 가지 방법 일뿐 아니라 Xcode 또는 Nuclide에서 직접 실행할 수도 있습니다.

앱 수정하기

이제 앱을 성공적으로 실행 했으므로 수정하십시오.

• 선택한 텍스트 편집기에서 index.ios.js 또는 index.android.js를 열고 일부 행을 편집하십시오.
• iOS 시뮬레이터에서 Command⌘ + R을 눌러 앱을 다시로드하고 변경 사항을 확인하십시오! 그게 다야!

축하해! 첫 번째 React Native 앱을 성공적으로 실행하고 수정했습니다.

_{출처 : 시작하기 - React-Native}

Windows 용 설정

참고 : Windows에서 iOS 용 반응 기본 응용 프로그램을 개발할 수는 없으며 네이티브 Android 응용 프로그램에만 반응합니다.

Windows에서의 반응식 네이티브에 대한 공식 설치 문서는 여기에서 찾을 수 있습니다 . 자세한 내용이 필요하면 여기에 세분화 된 가이드가 있습니다 .

도구 / 환경

• 윈도우 10
• 명령 줄 도구 (예 : Powershell 또는 Windows 명령 줄)
• Chocolatey ( PowerShell을 통해 설정하는 단계 )
• JDK (버전 8)
• Android Studio
• HAXM을 위해 가상화 기술이 활성화 된 Intel 시스템 (선택 사항, 에뮬레이터를 사용하려는 경우에만 필요함)

1) 반응 네이티브 개발을위한 시스템 설정

다음 명령을 실행하여 관리자로 명령 줄을 시작하십시오.

choco install nodejs.install
choco install python2

npm을 실행할 수 있도록 명령 줄을 관리자로 다시 시작하십시오.

npm install -g react-native-cli

마지막 명령을 실행 한 후 react-native가 설치된 디렉토리를 복사합니다. 4 단계에서이 디렉토리가 필요합니다. 두 컴퓨터에서 한 번 시도했습니다. C:\Program Files (x86)\Nodist\v-x64\6.2.2 . 다른 것은 C:\Users\admin\AppData\Roaming\npm

2) 환경 변수 설정

이미지가있는 Step by Step 안내서는이 섹션에서 찾을 수 있습니다.

다음으로 이동하여 환경 변수 창을여십시오.

[오른쪽 클릭] "시작"메뉴 -> 시스템 -> 고급 시스템 설정 -> 환경 변수

하단 섹션에서 "Path"시스템 변수를 찾고 1 단계에서 react-native가 설치된 위치를 추가하십시오.

ANDROID_HOME 환경 변수를 추가하지 않았다면 여기에서도해야합니다. 여전히 "환경 변수"창에서 "ANDROID_HOME"이라는 이름으로 새 시스템 변수를 추가하고 android sdk의 경로로 값을 입력하십시오.

그런 다음 관리자로 명령 줄을 다시 시작하여 응답 원시 명령을 실행할 수 있습니다.

3) 프로젝트 만들기 명령 줄에서 프로젝트를 배치 할 폴더를 탐색하고 다음 명령을 실행합니다.

react-native init ProjectName

4) 프로젝트를 실행하십시오. android studio에서 에뮬레이터를 시작하십시오. 명령 행에서 프로젝트의 루트 디렉토리로 이동하여 실행하십시오.

cd ProjectName
react-native run-android

종속성 문제가 발생할 수 있습니다. 예를 들어 올바른 빌드 도구 버전이 없다는 오류가있을 수 있습니다. 이 문제를 해결하려면 Android Studio에서 SDK 관리자 를 열고 거기에서 빌드 도구를 다운로드해야합니다.

축하해!

UI를 새로 고치려면 에뮬레이터에서 앱을 실행하는 동안 r 키를 두 번 누를 수 있습니다. 개발자 옵션을 보려면 ctrl + m 누를 수 있습니다.

Linux (Ubuntu) 설치

1) Setup Node.JS

터미널을 시작하고 다음 명령을 실행하여 nodeJS를 설치하십시오.

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

노드 명령을 사용할 수없는 경우

sudo ln -s /usr/bin/nodejs /usr/bin/node

대안 NodeJS 설치 :

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

또는

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

현재 버전이 있는지 확인하십시오.

node -v 

npm을 실행하여 반응 원시 파일을 설치합니다.

sudo npm install -g react-native-cli

2) 자바 설정

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) 설치 Android Studio :

Android SDK 또는 Android Studio

http://developer.android.com/sdk/index.html

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) 설정 에뮬레이터 :

터미널에서 명령을 실행하십시오.

android

SDK Manager에서 "SDK Platforms"를 선택하면 "Android 7.0 (Nougat)"옆에 파란색 체크 표시가 나타납니다. 그렇지 않은 경우 확인란을 클릭 한 다음 "적용"을 클릭하십시오.

5) 프로젝트 시작

예제 응용 프로그램 초기화

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs : android/app/build.gradle 의 버전이 Android SDK에 다운로드 된 Build Tools와 동일한 지 항상 확인하십시오.

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) 프로젝트 실행

안드로이드 AVD를 열어 가상 안드로이드를 설정하십시오. 명령 행을 실행하십시오.

android avd

지침에 따라 가상 장치를 만들고 시작하십시오.

다른 터미널을 열고 명령 줄을 실행하십시오.

react-native run-android
react-native start