EXPO) 시뮬레이터로 실행해 보기

5. 웹에 이러한 Bundler 페이지가 뜬다. 시뮬레이터를 실행해보자.

 

안드로이드 폰은 Expo 앱을 설치후 Scan QR Code 기능으로 위 QR코드(CNNECTION: Tunnel) 인식시키고,

아이폰에은 Expo 앱을 설치후 일반카메라로 QR코드 인식시키면 된다.

​

나는 가상 mac에서 도저히 안드로이드 시뮬레이터를 실행시킬수없었기때문에 안드로이드는 QR코드를 이용해 공기계로 빌드시켰고,

ios는 위 페이지에서 Run on iOS simulator를 클릭했다. 그러면 자동으로 Xnode의 시뮬레이터를 실행시켜준다.

​

ios 시뮬레이터에 Open up App.js to start working on you app! 이라는 문구와함께 깔꼼한 화면(아까 blank선택해서)이뜬다.

​

6. Visual studio Code를 실행시켜주고 거기에 방금 생성한 프로젝트폴더 Drag&Drop해서 파일들을 열어준다음,

 

App.js를 클릭해주고 Open up App.js to start working on you app!이 문구를 수정하고 저장하면, ios 시뮬레이터는 자동 ReLoad!

 

안드로이드 공기계는 자동 리로드안됨 -_ㅜ 아직 방법을 못찾았다..(커넥트를 바꿔서그런감)

그래서 기기를 흔들어주면 develop menu가 뜨는데, 거기서 Reload를 클릭해주면 바뀐 화면을 볼수있다 bb

폰을 흔들어주면 나오는 menu에서 Enable Hot Reloading을 눌러서 Disable Hot Reloading상태로 만들어주면 자동 리로드됨 ㅇㅇ

​

※ ios시뮬레이터에서는 cmd+d를 누르면 developer menu가 뜸. Disable Live Reload 상태면 눌러서 Enable로 바꿔준다.

그러면 Hot Reloading Unavailable이 Enable Hot Reloading 상태로 바뀌고 또 그걸눌러 Hot Reloading을 활성화시켜준다.

(Live Reload는 전체 리로드, Hot Reload는 수정한 파일만 리로드)

(하지만 난 윈도우 키보드기때문에 cmd키가 없다. 그래서 cmd키를 ctrl로 바꿨는데 바꾸는방법은 다음에 다뤄보도록하게따!-참고)

 

​

일단 여기까지

테스트 끝.

​

참고로 윈도우에서 React-Native 안드로이드 환경구축 링크걸어놓을게요~

​

​

​

​

참조

https://jongmin92.github.io/2017/07/20/ReactNative/create-react-native-app/#3 (Expo 라이브러리 정보 및 추가방법)

https://medium.com/@jang.wangsu/rn-react-native-%EC%8B%9C%EC%9E%91-3aab881f574f

​

[출처] [ReactNative] Expo CLI 설치 및 사용 (create-react-native-app)|작성자 Drowsyn