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)

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐