리액트 네이티브 - WebView 자바스크립트 조작 & WebView와 앱 메시지 전달

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://expo.dev' }}
      javaScriptEnabled={true}
      injectedJavaScript={"document.body.innerHTML = \"abc\";window.ReactNativeWebView.postMessage(document.body.innerHTML)"}
      onMessage={(event)=>{console.log(event.nativeEvent.data)}}
    />
  );
}

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

 

 

 

참고:

https://docs.expo.dev/versions/latest/sdk/webview/

WebView - Expo Documentation

 

https://medium.com/capriza-engineering/communicating-between-react-native-and-the-webview-ac14b8b8b91a

Communicating between React Native and the WebView

 

https://stackoverflow.com/questions/68451589/react-native-webview-onmessage-is-not-triggered

React Native WebView onMessage() is not triggered