React Native의 WebView 안팎에서 커뮤니케이션

최근에 리액트 네이티브를 시작한 에루키티입니다.나는 초보자다.좀 부드럽게 해주세요.
여러 가지 이유로 WebView로 구성된 컨텐트를 그리기로 결정했습니다.
WebView는 웹페이지 전면에서 간단명료하게 Ifame과 유사한 기술입니다.WebView 구성 요소에서 정적 HTML이나 특정한 사이트의 웹 페이지가 내부에 나타난다.
안드로이드 네이티브의 경우 동명WebView, iOS/macOS의 경우WkWebView가 있다.
이번에는 리액트 네이티브의 웹뷰에서 웹뷰에서 배제하거나 거꾸로 대화하는 방법을 정리했다.

React Native의 WebView

React Native의 WebView는 이전 버전으로, 지금은 별도의 패키지인 것 같습니다.

https://github.com/react-native-webview/react-native-webview

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

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md

그럼 이번 보도는 WebView, 안에서 밖으로, 밖에서 안으로 통신하는 방법입니다.
마침 문서에 Communicating between JS and Native라는 단도직입적인 내용이 있다.

JSinjectedJavaScript를 React Native WebView 속성으로 지정

React Native WebView의 ref에서 JSinjectJavaScript 지정

웹뷰의 내용으로부터 메시지 보내기window.ReactNativeWebView.postMessage와 React Native 웹뷰의 속성으로 메시지 받기onMessage

이 세 가지 대화로

injectedJavaScript

패키지 공식https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#the-injectedjavascript-prop은 클래스 구성 요소에 대한 설명입니다.함수형 구성 요소(Hooks)로 쓰면 이런 느낌이죠.

const App: React.FC = () => {
  return (
    <WebView
      style={{ flex: 1 }}
      source={{
        url: 'http://localhost:3000',
      }}
      injectedJavaScript={`
        alert('Injected!');
        true; // 必須
      `}
    />
  )
}

injectedJavaScrpt는 문자열을 JavaScript로 실행하는 속성입니다.

console.log 어디로 가는지 모르기 때문에 사용할 수 없을 것 같아요

왜 끝이 필요한가truenote: this is required, or you'll sometimes get silent failures

실행 시기에 따라

injectedJavaScriptBeforeContentLoaded

injectedJavaScriptForMainFrameOnly

injectedJavaScriptBeforeContentLoadedForMainFrameOnly

이런 아종도 있다.
기본적으로 페이지를 읽기 전에 전역에 영향을 주는 코드를 실행해야 한다.

injectJavaScript

초기화할 때 전 세계에서만 JS를 실시하면 너무 불편합니다.이에 따라 웹뷰의 리프부터 메소드 실행injectJavaScript도 준비했다.

const App: React.FC = () => {
  const ref = React.useRef<any>()
  React.useEffect(() => {
    setTimeout(() => {
      ref.injectJavaScript(`
        alert('inject!');
        true;
      `)
    }, 3000)
  }, [])
  return (
    <WebView
      ref={ref}
      style={{ flex: 1 }}
      source={{
        url: 'http://localhost:3000',
      }}
    />
  )
}

모델이 적합합니다.ref.injectJavaScript(code) 언제든지 코드를 실행할 수 있습니다.Button 후 실행 코드, 생물 측정 OK 시 실행 코드 등 처리를 할 수 있다.

postMessage / onMessage

WebView 내부에서 실행되는 코드부터 React Native를 추진하려는 애플리케이션에 사용할 수 있습니다.window.ReactNativeWebView.postMessage(message).그러나 message는 문자열이어야 합니다.여러 데이터, 복잡한 데이터 구조 등을 보내려면 JSON을 사용하는 것이 좋다.postMessage에서 보낸 문자열은 속성onMessage에서 수신할 수 있습니다.

// React Native 側
const App: React.FC = () => {
  return (
    <WebView
      style={{ flex: 1 }}
      source={{
        url: 'http://localhost:3000'
      }}
      onMessage={(ev) => console.log(ev.nativeEvent.data)}
    >
  )
}

// WebView 内部のコード
if ('ReactNativeWebView' in window) {
  window.ReactNativeWebView.postMessage(
    JSON.stringify({ type: 'hoge', hoge: 'ほげ' }),
  )
}

와 같이 사용합니다.postMessage다만, 발송만 가능하고 답장을 받을 수 없는 등 사용이 편리하다고 할 수는 없지만, 웹뷰 내부에서 먼저 통신이 가능하다.

총결산

초기화injectedJavaScript 속성(나머지 3개 시스템)

1회 발사injectJavaScript방법

WebView 내부에서 보내기postMessage 함수

통일감은 없지만 조합해서 쓸 수밖에 없다.
React Native 초보자라서 잘못 알았나 봐요.만약 잘못이나 이렇게 하는 것이 비교적 좋다는 것이 있다면 반드시 평론 같은 것을 써야 한다.