[React Native] 리액트 네이티브(react native) WebView(웹뷰)

WebView란

쉽게 말해서 이미 존재하는 웹 페이지를 앱으로 옮기는 것이다.

WebView 사용전 준비

WebView를 사용하기 위해서는 WebView를 import해주어야한다.
원래는 리액트 네이티브 core에 있었지만, 리액트 네이티브가 core에서 빼버렸기 때문에 설치를 해주어야한다.

프로젝트 디렉토리로 가서 아래의 명령어 두 가지를 실행시켜주면 제대로 설치된다.
npm install --save react-native-webview
react-native link react-native-webview

기존 core에 있을때는 import {WebView} from 'react-native'; 로 import 해주었지만, 지금은 import { WebView } from 'react-native-webview'; 밑의 코드로 import 해주어야한다.

WebView 두 가지 방법

WebView는 uri로 웹페이지를 연결할 수도 있고, inline HTML을 이용하여 생성할 수도 있다.

//uri 사용

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

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

// inline HTML 사용

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '<h1>Hello world</h1>'}}
      />
    );
  }
}

WebView의 Props

WebView 컴포넌트는 기존에 가지고 있는 Props들이 있다. 몇 가지 Props를 알아보겠다.

• source: HTML이나, uri를 적어주는 부분이다.
  <URI 사용시>
  -uri: URI를 WebView에 로드시킨다.
  -method: HTTP method를 사용하며, Default 값은 GET 방식이다.
  -header: 추가적인 HTTP header을 보낼 수 있다.(안드로이드인 경우 GET 방식일 경우만 가능)
  -body: HTTP body를 보낸다.UTF-8 형식이어야한다.
  <static HTML 사용시>
  -html: static HTML파일을 WebView에 로드시킨다.
  -baseUrl: HTML안의 연관된 기본 URL주소들이 사용된다.
• automaticallyAdjustContentInsets
  -자동으로 내용 삽입을 조정해준다. 기본 값은 true이다.
• injectJavaScript
  -WebView로 전달될 문자열을 수신하고 즉시 자바스크립트로 실행시켜주는 기능이다.
• injectedJavaScript
  -View가 로드될 때 자바스크립트를 웹 페이지에 주입해준다.
• nativeConfig
  -WebView를 랜더링 할 때, 사용되는 native 컴포넌트를 재정의한다.
• onError
  -WebView 로드가 실패했을 경우 호출해주는 것
• onLoadStart
  -WebView 로드가 시작되면 호출해주는 것
• onLoad
  -WebView 로드가 완료되면 호출해주는 것
• onLoadEnd
  -WebView 로드가 성공 혹은 실패하면 호출해주는 것
• onMessage
  -WebView가 window.postMessage를 call하면 호출되는 것
• onNavigationStateChange
  -WebView 로딩이 시작되거나 끝나면 호출해주는 것
• scalesPageToFit
  -web content를 view에 맞게 크기조정
• javaScriptEnabled
  -WebView에서 자바스크립트를 사용할 수 있게 해주는 것. default값은 true
• scrollEnabled
  -scroll 가능 여부. default: true

WebView의 메소드

• extraNativeComponentConfig()
• goForward()
  -web view에서 한 페이지 앞으로 간다.
• goBack()
  -web viewd에서 한 페이지 뒤로 간다.
• reload()
  -현재 페이지를 새로고침한다.
• stopLoading()
  -현재 페이지의 로딩을 멈춘다.