Question

我已经通过在react-native中创建本机ui组件在android和ios中使用了Webview。在执行某些操作之后，在Web视图中有一个单击按钮发生，网站在该按钮上引发window.close（）事件，我需要捕获并执行一些操作。我的问题是如何捕获从网站引发的window.close（）事件，并将其传递给RN端进行进一步处理。

以下是在RN端实现的本机ui组件代码：

index.android.js文件=>

import PropTypes from 'prop-types';
import { requireNativeComponent, ViewPropTypes } from 'react-native';

// El nom a "name" no importa
const mcs = {
  name: 'PermissionWebview',
  propTypes: {
    sourceUri: PropTypes.string,
    ...ViewPropTypes,
  },
};

module.exports = requireNativeComponent('PermissionWebviewViewManager', mcs);

WebViewMMS.android.js文件=>

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PermissionWebview from '../mms_android';

class WebViewMMS extends Component {
  static navigationOptions = () => ({
    title: 'Testing',
  });

  constructor(props) {
    super(props);
    const { navigation } = this.props;
    this.state = {
      mmsUrl: navigation.state.params.mmsUrl,
    };
  }


  render() {
    const { mmsUrl } = this.state;

    return (
      <PermissionWebview
        mediaPlaybackRequiresUserAction={false}
        domStorageEnabled
        allowsInlineMediaPlayback
        allowFileAccessFromFileURLs
        allowUniversalAccessFromFileURLs
        sourceUri={mmsUrl}
        style={{ flex: 1 }}
      />
    );
  }
}

module.exports = WebViewMMS;
WebViewMMS.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
  }).isRequired,
};

Webviewmanager.java文件=>

public class PermissionWebviewViewManager extends SimpleViewManager<PermissionWebviewView> {

  public static final String REACT_CLASS = "PermissionWebviewViewManager";
  private String source;

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  public PermissionWebviewView createViewInstance(ThemedReactContext context) {
    return new PermissionWebviewView(context); //If your customview has more constructor parameters pass it from here.
  }

  @ReactProp(name = "sourceUri")
  public void setSource(PermissionWebviewView view, String source) {
    view.loadUrl(source);
  }
}

Webviewpacakge.java =>

public class PermissionWebviewPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
      new PermissionWebviewViewManager()
    );
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

customWebview.java文件=>

public class PermissionWebviewView extends WebView {

  private Context context;

  public PermissionWebviewView(Context context) {
    super(context);
    this.context = context;
    this.clearHistory();
    this.clearCache(true);
    this.loadUrl("about:blank");
    this.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));

    this.setWebViewClient(new WebViewClient());

    WebSettings webSettings = this.getSettings();
    webSettings.setJavaScriptEnabled(true);        
    webSettings.setUseWideViewPort(true);

    this.setWebChromeClient(new WebChromeClient() {
      @Override
      public void onPermissionRequest(final PermissionRequest request) {
        request.grant(request.getResources());
      }
    });
  }
}

任何人都可以帮助我找出如何解决上述问题吗？

在android native uicomponent中访问webview的window.postmessage并传递给RN

0 个答案: