[React-native] Expo 연결 오류

Expo webview를 실행해보려 했는데 오류가 발생했다.

이런 화면이 계속 되면서 로딩이 끝나면 어플이 터지고 연결이 되지 않았다. 

Expo webview를 실행하려면 (Expo cli가 이미 설치되어있다는 가정하에 진행)

$ expo install react-native-webview

cs

터미널에서 위 명령어를 통해 설치해줘야 한다. npm을 사용해 최신 버전을 설치하면 expo를 실행시 expo가 지원하지 않는 상위 버전이라 오류가 날 것이라고 경고한다. 위 명령어로 설치하는 것을 추천한다. 

https://docs.expo.io/versions/latest/sdk/webview/

Expo webview에 관한 공식 도큐먼트를 참고하면 된다. usage를 참조하면 예시 코드가 나와있다.

app.js에 아래 코드를 붙여넣는다.

import * as React from 'react'; import { WebView } from 'react-native-webview'; export default class App extends React.Component {   render() {     return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />;   } } Colored by Color Scripter

cs

그리고 터미널에서 expo start를 입력해 앱을 실행해볼 수 있다. 실행시 expo 개발자 창이 뜨는데 나같은 경우 network 설정이 LAN으로 되어있었는데 한번씩은 이걸 tunnel로 바꿔야 연결이 정상적으로 되었다.
휴대폰에서 Expo 앱을 설치한다. 앱스토어와 구글 플레이 스토어 모두 'Expo'를 검색하면 제일 위에 뜨는 어플을 설치하면 된다.  Expo 계정이 있다면 어플을 열고 로그인을 하면되고 계정이 없어도 Expo start를 통해 나타나는 qr코드를 찍으면 어플 테스트를 해볼 수 있다. 아이폰의 경우 일반 카메라 앱을 통해 QR 코드를 대면 위에서 Expo를 통해 열겠냐는 알림이 나와 실행해볼 수 있고 안드로이드의 경우 Expo 어플에서 QR코드를 찍을 수 있는 카메라 기능이 있다.



이제 앱을 편리하게 테스트 해 볼 수 있다. 엑스포 최고!