是否可以在WebView组件内创建一个函数,触发React Native函数?
yzuktlbb1#
有可能,但我不确定这是不是唯一的办法。基本上你可以设置一个onNavigationStateChange事件处理器,并在导航url中嵌入函数调用信息,这里是一个概念的例子。在React本机上下文中
onNavigationStateChange
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' })
r8xiu3jd2#
在<WebView/>上使用onMessage事件列表程序
<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")
bybem2ql3#
您可以在加载时向webview注入一个javascript函数,然后使用onMessage从您注入的函数获取响应。
6tdlim6h4#
是的,这是可能的,它存在一个软件包的react-native-webview-bridge。我用它大量的生产和它的工作完美。
goucqfw65#
我不确定,但我的看法是-你不能。Webview只能加载我们在Webview组件中定义的js部分。这是完全独立于其他组件的,它只是一个可视区域。
5条答案
按热度按时间yzuktlbb1#
有可能,但我不确定这是不是唯一的办法。
基本上你可以设置一个
onNavigationStateChange
事件处理器,并在导航url中嵌入函数调用信息,这里是一个概念的例子。在React本机上下文中
要调用本机方法,使用此方法只需触发webview的导航事件,并将函数调用信息嵌入到URL中。
r8xiu3jd2#
在
<WebView/>
上使用onMessage
事件列表程序在HTML中使用它来发布消息事件
bybem2ql3#
您可以在加载时向webview注入一个javascript函数,然后使用onMessage从您注入的函数获取响应。
6tdlim6h4#
是的,这是可能的,它存在一个软件包的react-native-webview-bridge。我用它大量的生产和它的工作完美。
goucqfw65#
我不确定,但我的看法是-
你不能。Webview只能加载我们在Webview组件中定义的js部分。这是完全独立于其他组件的,它只是一个可视区域。