sanguk.dev
작성완료
React Native 웹뷰 사용

React Native 웹뷰 사용

React Native 웹뷰 설치는 yarn add react-native-webview 또는 npm i react-native-webview로 진행하며, 사용 시 StatusBar />와 SafeAreaView />를 추가하여 디자인을 조정하고, allowsInlineMediaPlayback 속성을 true로 설정하면 iOS에서 영상이 전체화면으로 재생되는 것을 방지할 수 있다. 모든 요소의 스타일은 flex: 1로 설정하여 웹뷰를 전체 화면으로 표시한다.

React Nativereact-native-webview

설치

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

사용법

typescript
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 준 이유는 웹뷰를 전체 화면으로 보기 위함이다.