개요

React native 하이브리드 앱 연동 가이드에 대한 내용입니다. react native 에서 webview 를 사용하기 위해 몇몇 plugin 을 사용 할 수 있습니다. 해당 plugin 에 따른 사용방법이 다르기 때문에 javascript interface 를 활용하기 위한 method 를 제공합니다.

interface

let webInterface = Airbridge.createWebInterface(
        'YOUR_WEB_TOKEN',
        (command) => { 
            return `...`;
        }
    )

YOUR_WEB_TOKEN 은 대시보드의 Settings > Tokens > 웹 SDK 토큰 에서 확인할 수 있습니다.

class WebInterface {
        
  public readonly script: string;

	handle(command: string): void;    
}

return 받은 WebInterface 를 통해 javascript interface 를 활용 할 수 있습니다.

이용가이드

아래는 react-native-webview 연동에 대한 내용입니다.

react-native-webview 바로가기

let webInterface = Airbridge.createWebInterface(
    'YOUR_WEB_TOKEN',
    (command) => { 
        return `window.ReactNativeWebView.postMessage(${command})`;
    }
)

const handleWebViewMessage = (event) => {
    const message = event.nativeEvent.data;
    webInterface.handle(message);
};

return (
    <WebView
        source={{ uri: 'YOUR_PAGE_URL' }}
        onMessage={ handleWebViewMessage }
        injectedJavaScript={ webInterface.script }
    />
);

1. web interface 를 생성한다. postCommandFunction 에 app 으로 native channel로 메세지를 보내는 javascript 를 작성한다.
2. native channel 로 도착한 메세지 처리할 메소드(handleWebViewMessage)를 정의 한다. 를 handleWebViewMessage 을 통해 native SDK 로 전달한다.
3. WebView 생성시 아래 사항을 처리한다.
   1. onMessage 에 handleWebViewMessage 를 넣어 준다.
   2. injectedJavaScript 에 생성된 webInterface 에서 injection 할 script (webInterface.script)를 넣어준다.