Update
下面的代码片段,我通过 POST 获取来获取 JSON,一旦获取,响应就会显示在警报中。这是一个工作小吃博览会链接 https://snack.expo.io/@jerinjohnk/fetch-injected.
injectjs() {
let jsCode = `const bodyData = JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
});
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: bodyData,
}).then(response => response.text()).then(valueText => {
alert(JSON.stringify(valueText));
});`;
return jsCode;
}
render() {
return (
<View style={styles.container}>
<WebView
ref={webview => { this.webview = webview; }}
source={{
uri: "https://www.google.com"
}}
injectedJavaScript={this.injectjs()}
javaScriptEnabled = {true}
style={styles.webview}
/>
</View>
);
}
旧答案
我通常使用postMessage
当我需要在 HTML 和 React Native 代码之间进行通信时,在 React Native WebView 中。
postMessage(JSON.stringify(yourJson), '*');
document.addEventListener('message',(event) => {
eval(event, data)
}, false)
<WebView
ref={webview => { this.webview = webview; }}
source={anySource}
injectedJavaScript={script}
javaScriptEnabled = {true}
onMessage={this.onMessage}
onNavigationStateChange = {this.handleNavigation}
/>
onMessage = (e) => {
let { data } = e.nativeEvent; // data you will receive from html
}
this.webview.postMessage('YourMessage')
If postMessage
在世博会上不起作用,您可以使用onShouldStartLoadWithRequest
/ onNavigationStateChange
方法代替。
handleNavigation = (event) => {
const url = event.url;
const sections = url.split('#');
if(sections.length > 1 && sections[1].indexOf('message=') != -1) {
const message = sections[1[.replace('message=', '');
//Do any action with message
return;
}
//Other navigation actions
}