探索React Native与Webview的无缝融合:React Native WebView Javascript Bridge
import React, { PureComponent } from 'react';
import { WebView } from 'react-native-webview';
export default class MyWebView extends PureComponent {
render() {
const source = { uri: 'https://example.com' };
const messagingEnabled = true;
return (
<WebView
source={source}
messagingEnabled={messagingEnabled}
onMessage={this.onMessage}
originWhitelist={['*']}
/>
);
}
onMessage = event => {
const { webViewData } = event.nativeEvent.data;
// 处理接收到的数据
};
}
这个例子展示了如何在React Native应用中嵌入一个WebView组件,并启用消息传递功能,允许JavaScript代码与React Native中的代码进行交互。onMessage
回调函数用于接收来自WebView中JavaScript发送的消息。注意,在实际应用中,应该只允许信任的域名进行通信,而不是使用['*']
这样的通配符。
评论已关闭