[React] develop setting for react-native android

osx elcapitan 기준입니다.

역시 안드로이드 개발은 sdk를 잘 모른다면 세팅 난이도가 비약적으로 오르는것 같다.
버전에 따라서 상황이 달라지는 부분이 굉장히 많으니 주의!

참고링크

공식사이트

세팅법에 관한 기본적인 내용을 담고 있지만 안드로이드 개발세팅에 대해서는 생략되어있다.

https://facebook.github.io/react-native/docs/getting-started.html

Realm님의 포스트

공식사이트보다 내용이 더 잘되어 있지만 __안드로이드 스튜디오를 사용하지 않는__방법이다.

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

안드로이드 개발세팅

첫번째로 java 개발킷을 설치한다.
현재 최신버전은 Java SE Development Kit 8

링크 : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

watchman과 flow패키지를 설치

brew install watchman
brew install flow

node 설치 (node가 설치되어있으면 생략)

먼저 nvm을 설치해야하는데 저장소 링크는 https://github.com/creationix/nvm
readme를 살펴보니 설치 커멘드는 다음과 같다.
만약 실행이 안된다면 readme 문서를 뒤져보면 설정하는 방법이 나와있다.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash

터미널을 닫았다 다시열면 글로벌에서 실행할 수 았다.

nvm install node
nvm alias default node

여기서 루트가 2가지 방향으로 나뉜다.
android studio안드로이드 스튜디오를 설치하여 sdk를 설치하는것과 brew명령어로 안드로이드 스튜디오를 설치하지 않고 sdk를 설치하는 방법 두가지인데, 나뉘는 이유는 설치되는 sdk의 경로가 다르다.
개발에 안드로이드 스튜디오가 반드시 필요한 상황이 아니라서 루트를 선택할 수 있다.

필자는 뭣도 모르고 두가지 루트 다 설치하다가 osx가 엉망이 되었다. ㅠ_ㅠ
brew로 sdk를 설치하는것과 안드로이드 스튜디오를 설치하는것과 android sdk 경로가 다르니 한쪽 루트로 정해서 세팅하는것이 좋다.

not android studio

Realm님의 포스트의 방법인데 Homebrew를 활용한 방법.
다음 과정을 통하여 설치한다.

android sdk 매니저 설치

안드로이드 빌드의 핵심인 sdk 매니저를 설치한다.

brew install android-sdk

설치하면 경로가 /usr/local/opt/android-sdk로 되는것을 설치 메시지에서 확인할 수 있었다.

ANDROID_HOME 경로값 설정

realm 포스트에서 이 부분이 허술하게 적혀있었다. ANDROID_HOME값을 어디에 설정하는지 빠져 있어서 이유모를 빌드에러를 맛보았다. ㅠㅠ
/Users/{username}/.bash_profile파일을 열어서 다음과 같은 경로를 추가해준다.

export ANDROID_HOME=/usr/local/opt/android-sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

안드로이드 sdk 매니저 열기

다음 커멘드를 실행하면 안드로이드 sdk 매니저 창이 열리는것을 볼 수 있다.

android

use android studio

install android studio

안드로이드 스튜디오를 설치한다.
https://developer.android.com/studio/index.html

sdk경로확인

Preferencecmd+,에 들어가서 Android SDK섹션에 가면 sdk목록을 볼 수 있다.
아래쪽 Launch Standalone SDK Manager 버튼을 누르면 안드로이드 sdk 매니저 창을 볼 수 있다.

매니저에서 sdk 패키지 설치하기

다음 이미지를 참고하여 패키지를 설치한다. 상황과 시기에 따라 표시된 패치지는 엄청나게 달라지니 주의가 필요하다.

이미지 출처 : https://realm.io/kr/news/react-native/

나중에 빌드할때 패키지 없다고 오류가 날때 여기서 확인하고 설치해주면 된다.

react native 개발준비

cli패키지 설치

npm으로 패키지를 설치한다. -g 옵션으로 어디든지 react-native 커멘드를 실행할 수 있도록 한다.

npm install -g react-native-cli

프로젝트 만들기

hello라는 이름으로 프로젝트를 만든다.

react-native init hello

프로젝트가 만들어졌으면 다음 그림과 같이 실행방법이 적혀있는것을 확인할 수 있다.

실행하기

안드로이드 휴대폰을 컴퓨터에 케이블로 연결하고 다음 커멘드를 실행하여 hello world를 확인한다.

cd hello
react-native run-android

이 과정에서 오류없이 휴대폰에서 앱이 뜨고 정상적인 화면을 볼 수 있다면 개발준비가 완료되었지만 이 과정에서 오류가 발생하여 가장 많은 삽질을 하게 되었다. ㅠㅠ

완료

문제없으면 다음 그림과 같이 welcome 메시지를 볼 수 있다.
약간의 장난질로 쉽게 스타일을 변경할 수 있다.

Troubleshooting

빌드를 할때 일어났던 문제점들에 대한 섹션

빌드 오류

빌드를 할때 많은 콘솔이 나오는데 어디가 문제인지 정말 힘들다.
아래쪽 오류 메시지를 확인하는것보다 콘솔이 정상적으로 출력되다가 뭔가 문제가 생긴 메시지가 나온 부분들을 캐치해서 구글링을 해보면 된다.
sdk 패키지를 못찾아서 대부분의 오류원인이다보니 메시지를 잘 확인해봐야한다.

디바이스에서 localhost접속이 안되는 문제

앱이 빌드되어 설치되더라도 휴대폰에서 서버 접속오류를 맛본다. (빨간배경색에 메시지를 볼 수 있다.) 이유는 다른 기기에서 개발 컴퓨터를 localhost로 접속할 수 없기 때문이다.
컴퓨터로 접속할 수 있는 호스트로 변경해 줘야한다. 예) 192.168.0.35:8081

Running On Device 포스트에 그 문제점들이 다 나와있으니 참고바란다.

디바이스를 흔들면 개발에 관련된 메뉴가 나온다. 근데 잘 안나온다. -_-;;;

참고링크

Getting Started

https://facebook.github.io/react-native/docs/getting-started.html

Running On Device

https://facebook.github.io/react-native/docs/running-on-device-android.html#running-on-device

Troubleshooting

https://facebook.github.io/react-native/docs/troubleshooting.html#content

Try to React Native for Android

http://www.atware.co.jp/blog/2015/9/24/try-to-react-native-for-android