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 선택하면,  바뀐 소스로 재실행된다. 




















Posted by 자유프로그램