[英]React Native - Webview call React Native function
这是可能的,但我不确定这是否是唯一的方法。
基本上你可以设置一个onNavigationStateChange
事件处理程序,并在导航 url 中嵌入函数调用信息,这里有一个概念的例子。
在 React Native 上下文中
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'
})
您可以在加载时向 webview 注入一个 javascript 函数,然后使用 onMessage 从您在此处注入更多信息的函数获取响应
是的,有可能,它存在一个用于react-native-webview-bridge 的包。 我在生产中大量使用它,它运行完美。
在<WebView/>
上使用onMessage
eventListner
<WevView 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")
我不确定,但我的意见是——
你不能。 Webview 只能加载我们可以在 Webview 组件中定义的 js 部分。 这与其他组件完全分开,它只是一个可视区域。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.