ReactNative-Webview(1)

1. Introduction (소개)

• 웹 페이지를 앱으로 옮기는 것이다.

2. 기본 사용법

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

npx expo install react-native-webview

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

• uri 사용

//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 사용

// 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>'}}
      />
    );
  }
}

• react native with expo 에서 사용

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://youtube.com' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

React Natvie Expo 사용을 권장하는 이유
1. 빌드와 배포가 간편
2. 광범위한 라이브러리와 API 지원
3. 크로스 플랫폼 개발

3. WebView Props