[React-Native] Webview 사용하기

1. React-Native Webview 설치

웹뷰(WebView)란 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 앱에 임베딩하는 것을 말한다.

즉, 앱 안에 HTML iframe을 넣어놓은 것이다.

즉, WebView는 앱 내에 웹 브라우저를 넣는 것이다.

웹 페이지를 보기 위해서 혹은 앱 안에서 HTML을 호출하여 앱을 구현하는 하이브리드 형태의 애을 개발하는데에도 많이 사용된다.

npm install react-native-webview를 이용해서 webview를 설치해준다.
https://www.npmjs.com/package/react-native-webview

2. webview 사용하기

expo에서 webview를 사용하려면 webview를 불러와서 사용하면 된다

import { WebView } from 'react-native-webview';

const WebViewTest = () => {
  
  return(
 	<WebView
    source={{uri: "주소"}}
  	originWhitelist={["https://*", "http://*", "file://*", "sms://*",'intent://*']}
	onMessage={웹뷰에서 네이티브로 보내는 메세지를 받는 함수}
    onError={웹뷰가 에러가 났을 경우 어떻게 할지 알려주는 함수}
    />
  )
}

기본적으로 사용하는 방법이다.

source의 경우 내가 불러올 주소를 입력한다.

이때 헤더를 붙히고 싶으면

source={{uri:"주소", headers : 어쩌구}}

로 해주면 된다.

originWhiteList 는 탐색을 허용할 url을 확인하며 와일드카드를 허용한다.

onMessage는 웹뷰에서 네이티브로 보내주는 메세지를 캐치해서 처리하도록 하는 함수이고

onError는 웹뷰에서 에러가 발생시 처리하는 함수이다.

그 밖의 api들은 https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md 찾아볼 수 있다.

3. ios에서 웹뷰 에러시

app.json에서 ios.infoPlist에
"NSAppTransportSecurity": { "NSAllowsArbitraryLoads": true, "NSAllowsArbitraryLoadsInWebContent": true },
를 추가해서 외부 컨텐츠 허용을 해주면 권한 문제를 해결할 수 있다.