Notice
You can configure the Airbridge Expo SDK to handle Airbridge-related tasks within the hybrid app's in-app website without modifying the website's code.
The Expo SDK can handle commands related to event transmission, device settings, and user settings that occur within the Web SDK. Before displaying the website in the web view, configure the Expo SDK using the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions.
webToken: This is the Web SDK token. Your Web SDK token can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.
postMessageScript: This JavaScript code transmits the payload variable, which stores the command passed from the Web SDK to the Expo SDK, to the React Native area.
command: This command is passed from the Web SDK to the Expo SDK.
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}
/>
) : (
<></>
)
}Note that with the hybrid app setup, events that occur in the in-app web view must be collected through the Web SDK only. If collected through the App SDK as well, event duplication will occur. If your in-app web view uses a live mobile website, utilize only the Web SDK for event collection.
このページは役に立ちましたか？