React Native -- 설치후 ios, android 에서 Hello World 출력

React Native -- 설치후  ios, android 에서 Hello World 출력

환경 :  Mac OsX 요세미티, React Native 0.23, Xcode 7.2.1, Android Studio 2.0, zsh

참고 : https://facebook.github.io/react-native/docs/getting-started.html#content

          https://realm.io/kr/news/react-native/

          https://www.raywenderlich.com/126063/react-native-tutorial

          https://facebook.github.io/react-native/docs/android-setup.html#content  ==> Android Setup

          https://realm.io/kr/news/react-native/

          http://stackoverflow.com/a/36615435  ==> Android Studio 2.0 에서 shake 

1. homebrew 설치 & update 하기

brew update

   

   ** 주기적으로  brew update && brew upgrade  해주자.

       - brew update  ; git 에서 homebrew 새버전 있으면 가져옴.

       - brew upgrade ; homebrew 로 설치한 프로그램들을 최신 프로그램으로 바꿔줌.

2. node.js 4.0 이상 설치 

-- 버전 확인하기

node -v

3. watchman 설치하기  --> file system 감시

 brew install watchman 

4. flow 설치하기  --> static type checker

 brew install flow 

5. 

npm install -g react-native-cli

--> 설치 에러시에는 sudo 사용하면됨.

sudo npm install -g react-native-cli

6. 작업할 폴더로 이동하여, React Native 프로젝트를 만들자.

  -- 본인은 바탕화면에 React Native 라는 폴더 만들고, 이곳으로 이동하여 아래 명령 실행함.

react-native init TestRN

  --> 현재 위치에서 TestRN 이라는 폴더 만들고, 그 내부에 react native 프로젝트 생성하라는 명령어.

-- 설치 완료된 모습

7. ios simulator 에서 실행하는 2가지 방법

1) 방법 1

프로젝트 폴더로 이동한후

react-native run-ios

2) 방법 2

  -- Xcode 실행하여, TestRN/ios/TestRN.xcodeproj 을 열어서 실행시키면 ok!

8. 실행 결과

아래와 같이 React Packager 와 ios simulator 가 실행되는 모습 보이면 성공!!!!

9. Hello World 화면 출력하기

1) index.io.js 를 Sublime Text 2 같은 편집기로 아래와 같이 수정후 저장하자.

2 ) ios simulator 선택후 Command + R 누르면, 바뀐 내용으로 재실행되어 아래와 같은 화면 나옴.

10. android 설정하기

   1) Android Studio 2.0 설치하기

   2) ANDROID_HOME 환경 설정하기

   

     -- Android Studio 설치한 경우에는 sdk 위치가 다르므로 SDK Manager 실행하여 sdk 위치 확인가능.

         Android Studio > Tools 메뉴 > Android > SDK Manager  선택하라

     -- 본인은 zsh shell 사용 중이라, .zshrc 파일을 에디터로 열어서,

         export ANDROID_HOME=/Users/mainmac/Library/Android/sdk

         를 추가하여 저장하면 환경설정 완료됨.

         --> 이후 터미널 다시 열어야 함!!!

vim ~/.zshrc 

export ANDROID_HOME=/Users/mainmac/Library/Android/sdk

  3) 안드로이드 simulator 실행하기

      -- Android Studio 실해하여, AVD 실행하기

  4) 안드로이드 프로젝트 실행하기  --> 처음에 실패함.

react-native run-android

-- 하지만, 실패함.

   Build Tools revision 23.0.1  없어서 실패했다는 메세지 나옴

--> Android Studio 실행하여, SDK Manager 실행시킴.

     --> Android SDK Build-Tools 23.0.1 선택하여 설치함.

  5) 안드로이드 프로젝트 재실행함 ( 이때 AVD 는 사전에 실행되어있어야 함.)

      react-native run-android

  6) 안드로이드 프로젝트 실행결과

11. android 에서 Hello World 출력하기

   --  index.android.js 를 Sublime Text 2 같은 편집기로 아래와 같이 수정후 저장하자.

12. Hello World 화면 출력 결과

    -- Android Studio 2.0 의 emulator 인 경우에는 Command + M 누르고, Reload JS 선택하면,  바뀐 소스로 재실행된다.