react native Setting onMessage on a WebView overrides existing values of window.postMessage
广州大公司(秒杀bat)招react native 有兴趣简历发送到work@68xg.com
公司升级rn版本 需要使用到获取网页高度的功能 ,用到了onmessage这个方法 ,具体不详说太多 直接贴error和代码
Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined.
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, WebView, ScrollView, View } from 'react-native'; let thisWebView=null; export default class testrn extends Component { constructor(e){ super(e); } handleNavigationChange(){ let a= new Date().getTime(); const script = 'window.postMessage("'+a+'")'; // eslint-disable-line quotes thisWebView && thisWebView.injectJavaScript(script); // alert("df") } _onMessage (e) { alert(e.nativeEvent.data); } render() { const patchPostMessageFunction = function() { var originalPostMessage = window.postMessage; var patchedPostMessage = function(message, targetOrigin, transfer) { originalPostMessage(message, targetOrigin, transfer); }; patchedPostMessage.toString = function() { return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage'); }; window.postMessage = patchedPostMessage; }; const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();'; return ( <ScrollView style={{flex:1}}> <View style={{ height: 2232,}}> <WebView ref={webview => { thisWebView = webview; }} injectedJavaScript={patchPostMessageJsCode} source={{uri: "http://68xg.com?"}} onLoadEnd={this.handleNavigationChange} onMessage={this._onMessage} /> </View> <Text>文字文字</Text> </ScrollView> ); } }