React Native 웹뷰 사용

설치

yarn add react-native-webview
npm i react-native-webview

사용법

import WebView from 'react-native-webview';
import { Platform, StatusBar, SafeAreaView } from 'react-native';

const os = Platform.OS;
const barStyle = os === 'ios' ? 'dark-content' : 'light-content';

export default function() {
  return (
    <>
      <StatusBar barStyle={barStyle} />
      <SafeAreaView style={{ flex: 1 }}>
        <WebView
          source={{uri: 'https://google.com'}}
          allowsInlineMediaPlayback={true}
          style={{ flex: 1 }}
        />
      </SafeAreaView>
    </>
  );
}

1. <StatusBar />는 상단바의 디자인을 위해서 추가

2. <SafeAreaView />가 없으면 iOS에서 상단바 영역까지 컨텐츠가 나온다.

3. allowsInlineMediaPlayback 속성의 true값은 화면에 영상이 있을 경우 iOS에서 영상이 전체화면으로 켜지는 것을 방지해준다. (default: false)

4. 모두 style을 flex: 1 준 이유는 웹뷰를 전체 화면으로 보기 위함이다.