[React Native - ios/android] react-native-webview 사용 시 새로운 브라우저를 인앱으로 구동하는 옵션, loading handling 옵션 등

* react-native-webview 를 사용하여 웹뷰 구현 시, 해당 웹뷰 내에서 신규 브라우저를 띄우고자 하는 경우

 

ios 는 default 값이 인앱으로 구현되나, android 는 default 값이 새로운 브라우저를 띄운다.

간단하게 setSupportMultipleWindows 옵션을 변경하는 것으로 인앱구동 가능

 

  <WebView
    source={source}
    style={{flex: 1}}
    setSupportMultipleWindows={false} // android 새로운 브라우저 인앱 구동 옵션
  />

 

# 로딩 제어 관련 유용한 옵션들

 - onLoad : Function that is invoked when the WebView has finished loading.
 - onLoadEnd : Function that is invoked when the WebView load succeeds or fails.
 - onLoadStart : Function that is invoked when the WebView starts loading.
 - onLoadProgress : Function that is invoked when the WebView is loading.

* reference : https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onload

 

** 옵션 호출된 순서

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

function MyWeb({source}) {
  const onLoad = e => {
    console.log('onLoad');
  };

  const onLoadEnd = e => {
    console.log('onLoadEnd');
  };

  const onLoadStart = e => {
    console.log('onLoadStart');
  };

  const onLoadProgress = e => {
    console.log('onLoadProgress');
  };

  return (
    <>
      <WebView
        source={source}
        style={{flex: 1}}
        setSupportMultipleWindows={false}
        onLoad={onLoad} 
        onLoadEnd={onLoadEnd} 
        onLoadStart={onLoadStart} 
        onLoadProgress={onLoadProgress} 
      />
    </>
  );
}

export default MyWeb;