반응 네이티브 시작하기

Download react-native eBook

비고

React Native를 사용하면 JavaScript 만 사용하여 모바일 앱을 제작할 수 있습니다. React와 동일한 디자인을 사용하여 선언적 구성 요소로 풍부한 모바일 UI를 구성 할 수 있습니다.

React Native를 사용하면 "모바일 웹 앱", "HTML5 앱"또는 "하이브리드 앱"을 만들지 않습니다. Objective-C 또는 Java를 사용하여 만든 앱과 구별 할 수없는 실제 모바일 앱을 만들 수 있습니다. React Native는 일반 iOS 및 Android 앱과 동일한 기본 UI 빌딩 블록을 사용합니다. JavaScript와 React를 사용하여 이러한 빌딩 블록을한데 모은 것입니다.

오픈 소스이며 페이스 북이 관리합니다.

출처 : React Native 웹 사이트

Linux (Ubuntu) 설치

1) Setup Node.JS

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

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

sudo apt-get install nodejs
 

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

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

sudo apt-get install nodejs
 

대안 NodeJS 설치 :

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

sudo apt-get install nodejs
 

또는

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

sudo apt-get install nodejs
 

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

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

sudo apt-get install nodejs
 

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

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

sudo apt-get install nodejs
 

2) 자바 설정

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

sudo apt-get install nodejs
 

3) 설치 Android Studio :

Android SDK 또는 Android Studio

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

sudo apt-get install nodejs
 

Android SDK e ENV

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

sudo apt-get install nodejs
 

4) 설정 에뮬레이터 :

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

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

sudo apt-get install nodejs
 

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

여기에 이미지 설명을 입력하십시오.

5) 프로젝트 시작

예제 응용 프로그램 초기화

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

sudo apt-get install nodejs
 

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

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

sudo apt-get install nodejs
 

6) 프로젝트 실행

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

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

sudo apt-get install nodejs
 

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

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

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

sudo apt-get install nodejs
 

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은 이미 설치되어 있고, 그렇지 않으면 다음과 같이 실행됩니다.

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

  • Android Studio

    사용자 정의 설치 선택

    사용자 정의 설치 선택

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

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

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

    구성 -> SDK 관리자를 선택하십시오.

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

    SDK 플랫폼 창

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

    SDK 도구 창

  • 환경 변수 ANDROID_HOME

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

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

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

Mac 용 종속성

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

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

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

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

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

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

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

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

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

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

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

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

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

잠시 후에 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을 실행할 수 있도록 명령 줄을 관리자로 다시 시작하십시오.

choco install nodejs.install
choco install python2
 

마지막 명령을 실행 한 후 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) 프로젝트 만들기 명령 줄에서 프로젝트를 배치 할 폴더를 탐색하고 다음 명령을 실행합니다.

choco install nodejs.install
choco install python2
 

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

choco install nodejs.install
choco install python2
 

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

축하해!

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

Stats

876 Contributors: 14
Monday, April 10, 2017
아래 라이선스: CC-BY-SA

와 제휴하지 않음 Stack Overflow
Rip Tutorial: info@zzzprojects.com

eBook 다운로드