[React Native] WebView 사용법

1. 라이브러리

https://github.com/react-native-community/react-native-webview

react-native-community/react-native-webview

2. 설치

https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md

react-native-community/react-native-webview

yarn add react-native-webview

rn 0.60 이상이므로 pod install만! (android는 할 필요 x)

pod install

 

3. Usage

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

export default ({route}) => {
  const {uri, title} = route.params;
  const [loading, setLoading] = useState(true);

  return (
    <>
      {loading && (
        <ActivityIndicator color={theme.mint} style={{marginTop: 20}} />
      )}
      <WebView
        source={{uri}}
        onLoadEnd={() => setLoading(false)}
        renderLoading={() => <ActivityIndicator color="blue" />}
      />
    </>
  );
};