ReactNativeがオリジナルコンポーネントを呼び出す(WebView)

12248 ワード

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}}>