Notice
You can configure the Airbridge React Native SDK to handle Airbridge-related tasks occurring within the in-app website of a hybrid app without modifying the website's code.
React Native SDK can handle commands related to event transmission, device settings, and user settings carried out by the Web SDK. Configure the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions before displaying the website in the WebView.
webToken is a Web SDK token. You can find it on the [Settings]>[Tokens] page in the Airbridge dashboard.
postMessageScript is a JavaScript code that passes the payload variable, which stores the commands sent from the Web SDK to the React Native SDK, to the React Native area.
command is the command sent from the Web SDK to the React Native 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}
/>
) : (
<></>
)
}Make sure to collect the events that occur in the in-app WebView through the Web SDK in a hybrid app setting. When collecting such events through the App SDK, event duplication will occur.
このページは役に立ちましたか？