react-native, webview 마스터

안녕하세요, react-naitve의 webview를 마스터해보는 시간을 갖겠습니다.

 

저는 유튜브 영상처리를 위해 webview를 써오고 있는데요.

webview는 생각보다 많은 처리가 가능하더라고요~

그래서 한번 정리해보려 합니다.

 

1. source

source는 유일한 필수 property입니다. 따라서, 반드시 지정해주어야 합니다.

source에는 uri 또는 html이 올 수 있습니다.

말 그대로 page url이나 html을 작성하면 되는대요.

// uri 예제
<WebView 
	source={{ uri: 'https://naver.com' }}
/>

// html예제
<WebView 
	source={{ html: "<p>여기는 다음 티스토리</p>" }}
/>

 

2. useWebkit

공식문서에서는 해당 속성의 설명을 다음과 같이 하고있습니다.

"If true, use WKWebView instead of UIWebView."

그런데, 최신의 ios버전(아마 12부터)에서는 UIWebView 를 지원하지 않기 때문에 필수적으로 useWebkit을 사용해야합니다.

꼭, true로 값을 지정해주시기 바랍니다.

 

3. injectedJavaScript

webview의 source에서 지정한 것이 로드된 후에, 해당 페이지 또는 html에 javascript를 넣어주는것인데요.

다양한 용도로 쓰일 수 있겠죠?

응용해보시기 바랍니다.

(javaScriptEnabled를 함께 true로 지정해주어야 합니다.)

 

4. allowsInlineMediaPlayback

html의 비디오 태그에는 playsinline라는 속성이 있습니다.

ios에서 영상이 자동으로 fullscreen이 되는것을 막아주는 속성인데요.

webview에서도 해당 속성을 true로 지정해주면 같은 효과를 낼 수 있습니다.

 

5. 그 외

mixedContentMode, domStorageEnabled, mediaPlaybackRequiresUserAction 과 같은 다양한 속성이 있습니다.

다방면으로 대응 가능한 유용한 WebView!!

잘 활용해보시기 바랍니다.