import React, { Component } from ‘react’;
var invariant = require(‘invariant’);
var keyMirror = require(‘keymirror’);
var merge = require(‘merge’);
var resolveAssetSource = require(‘react-native/Libraries/Image/resolveAssetSource’);
var {PropTypes} = React;
var {
ActivityIndicatorIOS,
EdgeInsetsPropType,
StyleSheet,
Text,
View,
WebView,
requireNativeComponent,
UIManager,
DeviceEventEmitter,
NativeModules: {
WebViewBridgeManager
},
findNodeHandle,
} = require(‘react-native’);
并且将: 将一下代码中的React.findNodeHandle删除开头的React,,更改为: return findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]);
getWebViewBridgeHandle: function() {
return React.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]);
}
在Android 中是只有一个实例的,也就是说在一个中调用了injectedJavaScript,则,其余不会再对其响应的界面进行注入message相关的语句,导致,页面无法同native进行通信,更改源码:使得能够注入多个页面,详细代码如下网址已实现该问题处理:
https://github.com/alinz/react-native-webview-bridge/pull/106/files#r67672790
最后一个严重的问题是,当实现了多个实例后,当react-native 中unmount了组件,再重新进入组件,会发现,webview中仅仅往react-native的组件发了一条消息,但是在react-native中出现多次响应,
查看源码发现:node_modules\react-native-webview-bridge\webview-bridge\index.android.js,源码中发现只有addListener,而没有remove.Listener:从而导致,unmount的组件再进去后,listener保留在运行过程中,也就是出现多个相同的listener,这样webview往react-native组件发一个消息,而导致多次响应。
解决方法:将listener通过变量记录,在componentWillUnmount中将其移除,避免出现多次接收webview组件的消息:
添加一个变量listener:
var WebViewBridge = React.createClass({
listener:null,
propTypes: {
对象篇
模块化编程-自研模块加载器
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-oss-process=image/format,png)