浙江中立建设有限公司网站,南昌地宝网app,网站维护是怎么回事,建湖网页设计React Native Version:0.51RN 在 0.37 版本中加入了WebView功能#xff0c;所以想要在使用WebView,版本必须0.37#xff0c;发送的 message 只能是字符串#xff0c;所以需要将其他格式的数据转换成字符串#xff0c;在接收到后再转换回去#xff0c;其实直接用JSON.s…React Native Version:0.51RN 在 0.37 版本中加入了WebView功能所以想要在使用WebView,版本必须0.37发送的 message 只能是字符串所以需要将其他格式的数据转换成字符串在接收到后再转换回去其实直接用JSON.stringify和JSON.parse就可以加载 htmlsource属性用于指定加载的 html可以加载在线的页面也可以加载本地的页面代码如下// 加载线上页面source{{uri: http://www.mi.com}}/// 加载本地html文件source{require(../src/html/index.html)}/注意 ⚠️在 RN 中可以加载 WebView但是无法调试也不能使用 alert 来验证代码 js 代码是否运行成功只能通过往 html 写入东西(innerHTML)来验证 js 是否运行成功WebView 与 html 的通信webview 发送信息到 htmlWebView 给 html 发送信息需要使用postMessage而 html 接收 RN 发过来的信息需要监听message事件代码如下// RNclass WebViewExample extends Component {onLoadEnd () {this.refs.webview.postMessage this is RN msg}render() {return (refwebviewsource{require(../html/index.html)}onLoadEnd{this.onLoadEnd}/)}}export default WebViewExample// webwindow.document.addEventListener(message, function(e) {const message e.data})这里需要注意一点postMessage需要在 webview 加载完成之后再去 post如果放在commponentWillMount里由于页面没有加载完成就 post 信息会导致 html 端无法监听到 message 事件。html 发送信息到 webview// RNclass WebViewExample extends Component {handleMessage e {const message e.nativeEvent.data}render() {return (refwebviewsource{require(../html/index.html)}onMessage{e this.handleMessage(e)}/)}}export default WebViewExample// webwindow.postMessage(this is html msg)debugRN 中 debug webview 和安卓开发中看起来是差不多的连接好设备后在 chrome 中输入chrome://inspect就可以看到安卓设备上正在运行的 webview 了点击inspect就会开启一个调试页面就可以进行 debug 了RN 似乎默认开启了 debug 调试直接就可以看到 webview 中输出的信息。webview_debug.png但是我发现我打开的调试界面是一个错乱的界面不知道为什么无奈。debug界面.jpeg注意 ⚠️这里需要注意一点的由于安卓版本的差异所以内部的 webview 对 js 的支持程度也不同为了保证兼容性如果使用了 ES6请转成 ES5否则会报错。
