유저 가이드개발자 가이드API
대시보드

하이브리드 앱 설정하기 - 리액트 네이티브 SDK (v4)

알립니다

하이브리드 앱 설정을 하기 전에 앱과 웹사이트에 각각 리액트 네이티브 SDK와 웹 SDK를 설치해 주세요.

하이브리드 앱에서 웹 사이트 코드를 변경하지 않아도 에어브릿지 리액트 네이티브 SDK가 인앱 웹 사이트에서 발생하는 에어브릿지 관련 작업을 처리하도록 설정할 수 있습니다.

리액트 네이티브 SDK로 웹 SDK 동작 처리하기

리액트 네이티브 SDK는 웹 SDK에서 진행되는 이벤트 전송, 디바이스 설정, 유저 설정에 관한 명령을 대신 처리할 수 있습니다. 웹뷰에 웹 사이트를 표시하기 전에 Airbridge.createWebInterfaceScript 함수와 Airbridge.handleWebInterfaceCommand 함수를 이용해 설정해 주세요.

webToken 은 웹 SDK 토큰입니다. 웹 SDK 토큰은 에어브릿지 대시보드의 [설정]>[토큰 관리]에서 확인할 수 있습니다.

postMessageScript 는 웹 SDK가 리엑트 네이티브 SDK에 전달하는 명령어가 저장된 payload 변수를 리액트 네이티브 영역에 전달하는 자바스크립트 코드입니다.

command 는 웹 SDK가 리액트 네이티브 SDK에 전달하는 명령어입니다.

123456789101112131415161718192021222324252627282930
import { useEffect, useState } from 'react'
import { WebView } from 'react-native-webview'
import { Airbridge } from 'airbridge-react-native-sdk'

export const App = () => {
    const [script, setScript] = useState<string | undefined>(undefined)

    useEffect(() => {
        const webToken = 'YOUR_WEB_SDK_TOKEN'
        const postMessageScript = 'window.ReactNativeWebView.postMessage(payload)'
        Airbridge.createWebInterfaceScript(webToken, postMessageScript).then((script) => {
            setScript(script)
        })
    }, [])

    return (
        script !== undefined
    ) ? (
        <WebView
            source={{ uri: 'https://...' }}
            onMessage={(event) => {
                const command = event.nativeEvent.data
                Airbridge.handleWebInterfaceCommand(command)
            }}
            injectedJavaScript={script}
        />
    ) : (
        <></>
    )
}

주의사항

아래 사항을 주의해 주세요.

도움이 되었나요?

더 필요한 내용이 있나요?