react native原生UIコンポーネント

オリジナルUIコンポーネントのパッケージ方法はパッケージの元のモジュールと非常に似ています.
WebViewを例にして実装します.
Simple View Managerという汎型のクラスを引き継ぐ必要がありますが、元のモジュールと同じように、getNameを書き換える方法が必要です.UIコンポーネント名をJavaScreateView層に暴露し、次にcreateView Instance方法を書き換える必要があります.javascript層に必要な属性を暴露します.簡単のために、ここでは二つの属性しか露出していません.一つはurlです.一つはhtmlです.javascript層にurlを設置すると、一つのページがロードされます.これを設定すると、これをロードします.属性の暴露は注釈を使用して、対応するset方法に注釈を設定します.その後、UIの更新を処理します.例えば、urlが設定されたら、set Urlの中にウェブページをロードします.最終的に私達のView Managerはこのようです.

package com.reactnativeproject;

import android.support.annotation.Nullable;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

/**
 * Created by createdit on 17/2/10.
 */
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");
    }
}

元のモジュールと同様に、元のUIコンポーネントも登録し、ReactPackageインターフェースを実現し、WebViewの登録を行う必要があります.

package com.reactnativeproject;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

/**
 * Created by createdit on 17/2/10.
 */
public class AppReactPackage implements ReactPackage {

    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }

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

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