javascript React Native - Webview调用React Native函数

izkcnapc  于 2023-01-08  发布在  Java
关注(0)|答案(5)|浏览(216)

是否可以在WebView组件内创建一个函数,触发React Native函数?

yzuktlbb

yzuktlbb1#

有可能,但我不确定这是不是唯一的办法。
基本上你可以设置一个onNavigationStateChange事件处理器,并在导航url中嵌入函数调用信息,这里是一个概念的例子。
在React本机上下文中

render() {

    return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} />
}

_onURLChanged(e) {

    // allow normal the natvigation
    if(!e.url.startsWith('native://'))
        return true
    var payload = JSON.parse(e.url.replace('native://', ''))
    switch(e.functionName) {
        case 'toast' :
            native_toast(e.data)
        break
        case 'camera' :
            native_take_picture(e.data)
        break
    }
    // return false to prevent webview navitate to the location of e.url
    return false

}

要调用本机方法,使用此方法只需触发webview的导航事件,并将函数调用信息嵌入到URL中。

window.location = 'native://' + JSON.stringify({ 
    functionName : 'toast', data : 'show toast text' 
})
r8xiu3jd

r8xiu3jd2#

<WebView/>上使用onMessage事件列表程序

<WebView onMessage={onMessage} ... />
/** on message from webView -- window.ReactNativeWebView?.postMessage(data) */
  const onMessage = event => {
    const {
      nativeEvent: {data},
    } = event;

    if (data === 'goBack') {
      navigation.goBack();
    } else if (data?.startsWith('navigate')) {
      // navigate:::routeName:::stringifiedParams
      try {
        const [, routeName, params] = data.split(':::');
        params = params ? JSON.parse(params) : {};
        navigation.navigate(routeName, params);
      } catch (err) {
        console.log(err);
      }
    }
  };

在HTML中使用它来发布消息事件

window.ReactNativeWebView?.postMessage("data")
bybem2ql

bybem2ql3#

您可以在加载时向webview注入一个javascript函数,然后使用onMessage从您注入的函数获取响应。

6tdlim6h

6tdlim6h4#

是的,这是可能的,它存在一个软件包的react-native-webview-bridge。我用它大量的生产和它的工作完美。

goucqfw6

goucqfw65#

我不确定,但我的看法是-
你不能。Webview只能加载我们在Webview组件中定义的js部分。这是完全独立于其他组件的,它只是一个可视区域。

相关问题