原生UI组件的封装方法与封装原生模块十分类似。

我们以 WebView 为例进行封装。

需要继承 SimpleViewManager 这个泛型类，和原生模块类似，需要重写getName()方法，将UI组件名称暴露给JavaScript层，接着需要重写createViewInstance方法，在里面返回我们需要使用的原生UI组件的实例，这里就是WebView。然后就是暴露一些必要属性给javascript层，为了简单起见，我们这里只暴露两个属性，一个是url，一个是html，一旦javascript层设置了url，就会加载一个网页，而一旦设置了html，则会去加载这段html，而属性的暴露是使用注解，将注解设置在对应的set方法上，之后再set方法中处理UI的更新，比如一旦设置了url，在setUrl里面就要加载网页。最终我们的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组件也需要进行注册，实现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<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();
    }
}