背景:
react native自带的view组件有时无法满足项目中一些特殊需求，或者性能、兼容性有待提升，这时往往就需要从原生入手，封装一套UI供RN上层使用。
原生UI封装步骤：
1.创建一个继承自ViewManager的子类：
这里注意到有三个可供继承：ViewManager、BaseViewManager(extend 前者)、SimpleViewManager(extend 前者)，我们往往使用SimpleViewManager，它可以满足大多数的场景，因为它包含更多公共的属性，例如弹性布局、透明度、背景颜色等。
public class WebviewManager extends SimpleViewManager<View> {
    @Override
    public String getName() {
        return "WebView";
    }
}
2.实现 createViewInstance 方法：
    @Override
    protected View createViewInstance(ThemedReactContext reactContext) {
        this.mContext = reactContext;
       
        ll_Layout = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_webview,null);
        rl_layout = ll_Layout.findViewById(R.id.rl_layout);
        iv_back = ll_Layout.findViewById(R.id.iv_back);
        tv_title = ll_Layout.findViewById(R.id.tv_title);
        webView = ll_Layout.findViewById(R.id.webView);
        WebViewContance.settingWebView(webView,mContext);//设置webview属性
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                if(null != title){
                    tv_title.setText(title);
                }
            }
        });
        return ll_Layout;
    }

3.设置视图的属性：

使用@ReactProp（或@ReactPropGroup）注解：    
方法的第一个参数是指要修改属性的view对象，第二个参数是要设置的属性值，属性值支持的类型：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap，方法的返回值类型必须为void。
举例属性如下：（这里仅展示了部分属性，可根据实际项目需求预添加一些属性）

    //是否显示导航栏
    @ReactProp(name = "showNavigationBar")
    public void showNavigationBar(final View view, final boolean isShow) {
        if(isShow){
            rl_layout.setVisibility(View.VISIBLE);
        }else {
            rl_layout.setVisibility(View.GONE);
        }
    }

    //设置标题
    @ReactProp(name = "title")
    public void setTitle(final View view,final String title) {
        if(null != title){
            tv_title.setText(title);
        }
    }

    //设置加载的url
    @ReactProp(name = "url")
    public void setUrl(final View view,final String url) {
        if(url != null && url.trim().length()>0 ){
            webView.loadUrl(url);
        }
    }

4.注册viewManager：    

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

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

然后在自定义的Application中的getPackages方法中添加这个WebviewPackage
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new WebviewPackage()
      );
    }

5.在react native上层封装对应的WebView：

import React, {Component,} from 'react';
import {requireNativeComponent, StyleSheet, View,} from 'react-native';
import PropTypes from 'prop-types';
import {colors, dimens} from "../../resource";

const webView = {
    name:"WebView",
    propTypes:{
        "showNavigationBar":PropTypes.bool,
        "title":PropTypes.string,
        "url":PropTypes.string,
        ...View.propTypes
    }
}

const MyWebView = requireNativeComponent('WebView',webView,{
});

export default class WebView extends Component {
    render() {
        return (
            <MyWebView style={styles.webStyle}  {...this.props} />
        );
    }
}

6.引用这个组件使用即可。

到这里一个简单的原生的view就已经可以供RN使用了，也希望能够帮助到你，谢谢阅览~