User GuideDeveloper GuideAPI
Dashboard

Hybrid App 设置 - React Native SDK (v4)

提示

在进行 Hybrid App 设置之前，请先分别在 App 和网站上完成 React Native SDK 和 Web SDK 的安装。

通过设置，您无需更改 Hybrid App 中网站的代码，也能让 Airbridge React Native SDK 处理应用内网站中的 Airbridge 相关操作。

使 React Native SDK 处理 Web SDK 操作

React Native SDK 可以代替 Web SDK 处理事件发送、设备设置和用户设置等命令。在 WebView 中加载网站之前，请使用 Airbridge.createWebInterfaceScript 和 Airbridge.handleWebInterfaceCommand 函数进行设置。

webToken 是 Web SDK Token，可在 Airbridge 面板的 [设置]>[Token] 获取。

postMessageScript 是一段 JavaScript 代码，用于将 Web SDK 传递给 React Native SDK 的命令所存储的 payload 变量传递至 React Native 端。

command 是 Web SDK 传递给 React Native 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}
        />
    ) : (
        <></>
    )
}

注意事项

Was this page helpful?

Have any questions or suggestions?