React Native 웹뷰 사용하기 (react-native-webview)

• react-native-webview 설치하기

npm i react-native-webview

• 간단한 사용 예시

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {WebView} from 'react-native-webview';

const INJECTED_JAVASCRIPT = `(function() {
    window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();`;

const runFirst = `
    document.body.style.backgroundColor = '#eeddcc';
    setTimeout(function() { window.alert('hello world') }, 2000);
    true;
`;

function TestWebView() {
  return (
    <View style={styles.container}>
      <WebView
        source={{uri: 'https://naver.com'}}
        style={styles.webView}
        // injectedJavaScript={INJECTED_JAVASCRIPT}
        injectedJavaScript={runFirst}
        onMessage={() => console.log('On Message')}
      />
      <View style={styles.sampleView}>
        <Text>VIEW 1</Text>
      </View>
    </View>
  );
}

export default TestWebView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webView: {
    margin: 20,
    flex: 1,
  },
  sampleView: {
    flex: 1,
    backgroundColor: 'skyblue',
  },
});

• 또는 웹뷰 컴포넌트에 ref를 연결할 수 있다.
• useRef 훅을 통해서 웹뷰에 ref를 연결하고, 직접 웹뷰 컴포넌트를 조작하는 방법을 사용할 수도 있다.

 

공식 깃허브 : https://github.com/react-native-webview/react-native-webview#readme

GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView

시작하기 : https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md

GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView