原生UI組件的封裝方法與封裝原生模塊十分類似。

我們以 WebView 為例進(jìn)行封裝。

需要繼承 SimpleViewManager 這個(gè)泛型類，和原生模塊類似，需要重寫getName()方法，將UI組件名稱暴露給JavaScript層，接著需要重寫createViewInstance方法，在里面返回我們需要使用的原生UI組件的實(shí)例，這里就是WebView。然后就是暴露一些必要屬性給javascript層，為了簡(jiǎn)單起見，我們這里只暴露兩個(gè)屬性，一個(gè)是url，一個(gè)是html，一旦javascript層設(shè)置了url，就會(huì)加載一個(gè)網(wǎng)頁(yè)，而一旦設(shè)置了html，則會(huì)去加載這段html，而屬性的暴露是使用注解，將注解設(shè)置在對(duì)應(yīng)的set方法上，之后再set方法中處理UI的更新，比如一旦設(shè)置了url，在setUrl里面就要加載網(wǎng)頁(yè)。最終我們的ViewManager就是這樣子的。

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<WebView> {

    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組件也需要進(jìn)行注冊(cè)，實(shí)現(xiàn)ReactPackage接口，進(jìn)行WebView的注冊(cè)。

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<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

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