[React-Native] React native 와 WebView 데이터 통신

React native 와 webView 데이터 통신

 

 

회사에서 react natve에서 webview를 띄워주고 webview안에서 액션이 있을경우 react native로 return값을 줘야하는 작업이 있었다. 그래서 어떤 식으로 메시지를 주고받을 수 있는지 알아보게 되었다.

 

기본적으로 에서 사용할 수 있는 API는 3가지가 있다.

 

1. injectedJavaScript

WebView안에서 실행할 JavaScript 코드를 삽입할 수 있다.

 

<WebView

    source={require('./resources/index.html')}

    injectedJavaScript={'(function(){return "Send me back!"}());'}

    onNavigationStateChange={(navEvent)=> console.log(navEvent.jsEvaluationValue)}

/>

 

2. injectJavaScript

반환 값 없이 WebView에서 즉시 실행되는 JavaScript 코드를 삽입할 수 있다.

 

3. onMessage/postMessage

실제적인 양방향 통신을 위한 API이다. 

React native 쪽에서 onMessage를 통해 WebView의 postMessage를 호출하면 데이터를 받는 형식이다.

 

<WebView

    source={require('./resources/index.html')}

    onMessage={(event)=> console.log(event.nativeEvent.data)}

/>