리액트 네이티브 웹뷰 자바스크립트 삽입(injection)

React-Native WebView JavaScript 삽입 후 이벤트까지 네이티브로 실행시켜보는 예제이다.

버전은 0.61이고, 공식문서에는 window.postMessage라고해서 했더니 안되길래 버근줄알았는데

스택오버플로우에 window.ReactNativeWebView.postMessage란다..

여하튼 해결!

const appData = (event) => 
{
	Alert.alert(event.nativeEvent.data);
}

const eventScript = 
`
	document.querySelector(".submit").addEventListener("click", function()
    {
    	send();
    })
    
    function send()
    {
    	window.ReactNativeWebView.postMessage("Hello world!");
    }
    
`


<WebView
	injectedJavaScript={eventScript}
	onMessage={appData}
/>

 

자바스크립트 삽입 후 특정 이벤트를 실행하면 잘 실행되서 리액트 네이티브로 빼오는 것을 볼 수 있다.

데이터 파싱하기가 조금 힘들긴한데 어떻게든 될 것 같다.