ReactNative调用原生组件(WebView)

android工程:

ReactWebViewManager.class(新建)

public class ReactWebViewManager extends SimpleViewManager {

    public static final String REACT_CLASS = "RCTWebView";

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

    @Override
    protected WebView createViewInstance(ThemedReactContext reactContext) {
        WebView webView = new WebView(reactContext);
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        return webView;
    }

    @ReactProp(name = "url")
    public void setUrl(WebView view,@Nullable String url) {
        Log.e("TAG", "setUrl");
        view.loadUrl(url);
    }
    @ReactProp(name = "html")
    public void setHtml(WebView view,@Nullable String html) {
        Log.e("TAG", "setHtml");
        view.loadData(html, "text/html; charset=utf-8", "UTF-8");
    }
}

AnExampleReactPackage.class(新建)

public class AnExampleReactPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

        modules.add(new ToastModule(reactContext));

        return modules;
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.asList(
                new ReactImageManager(),
                new ReactWebViewManager()
        );
    }
}

MainApplication.class添加新建的模块

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new AnExampleReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

js部分

WebView.js(新建)...View.propTypes这个一定要写,不然新版本会报错,吧默认属性也给进去

import React,{PropTypes} from 'react';
import {requireNativeComponent,View} from 'react-native';

//新版本必须加...View.propTypes
var iface = {
    name: 'WebView',
    propTypes: {
        url: PropTypes.string,
        html: PropTypes.string,
        ...View.propTypes
    },
}

module.exports = requireNativeComponent('RCTWebView', iface,{
    nativeOnly:{
        "testID": true,
        'renderToHardwareTextureAndroid': true,
        'accessibilityComponentType': true,
        'accessibilityLabel': true,
        'importantForAccessibility': true,
        'accessibilityLiveRegion': true,
        'onLayout':true,
    }
});

调用:

var WebView = require('../AndroidNativeModules/WebView');

url="https://www.baidu.com" style={{width:200,height:400}}>

你可能感兴趣的:(ReactNative的那些坑)