React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。而且，说不定你曾经为自己以前的App还封装过一些组件，React Native肯定没法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件非常简单。
原生视图需要被一个ViewManager的派生类（或者更常见的，SimpleViewManager的派生类）创建和管理。一个SimpleViewManager可以用于这个场景，是因为它能够包含更多公共的属性，譬如背景颜色、透明度、Flexbox布局等等。
这些子类本质上都是单例——React Native只会为每个管理器创建一个实例。它们创建原生的视图并提供给NativeViewHierarchyManager，NativeViewHierarchyManager则会反过来委托它们在需要的时候去设置和更新视图的属性。ViewManager还会代理视图的所有委托，并给JavaScript发回对应的事件。
提供原生视图很简单：创建一个ViewManager的子类。实现createViewInstance方法。导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。把这个视图管理类注册到应用程序包的createViewManagers里。实现JavaScript模块。
这里,我们以WebView举例 来实现封装原生UI组件的功能.
1. 创建ViewManager的子类
在这个例子里我们创建一个视图管理类ReactWebViewManager，它继承自SimpleViewManager。ReactImageView是这个视图管理类所管理的对象类型，这应当是一个自定义的原生视图。getName方法返回的名字会用于在JavaScript端引用这个原生视图类型。
...public class ReactWebViewManager extends SimpleViewManager<ReactImageView> {@Overridepublic String getName() {return "AndroidRCTWebView";}
2. 实现方法createViewInstance
视图在createViewInstance中创建，且应当把自己初始化为默认的状态。所有属性的设置都通过后续的updateView来进行。
@Overrideprotected WebView createViewInstance(ThemedReactContext reactContext) {WebView webView = new WebView(reactContext);webView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});return webView;}
3. 通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法。
要导出给JavaScript使用的属性，需要申明带有@ReactProp（或@ReactPropGroup）注解的设置方法。方法的第一个参数是要修改属性的视图实例，第二个参数是要设置的属性值。方法的返回值类型必须为void，而且访问控制必须被声明为public。JavaScript所得知的属性类型会由该方法第二个参数的类型来自动决定。支持的类型有：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap。
@ReactProp注解必须包含一个字符串类型的参数name。这个参数指定了对应属性在JavaScript端的名字。
除了name，@ReactProp注解还接受这些可选的参数：defaultBoolean, defaultInt, defaultFloat。这些参数必须是对应的基础类型的值（也就是boolean, int, float），这些值会被传递给setter方法，以免JavaScript端某些情况下在组件中移除了对应的属性。注意这个”默认”值只对基本类型生效，对于其他的类型而言，当对应的属性删除时，null会作为默认值提供给方法。
使用@ReactPropGroup来注解的设置方法和@ReactProp不同。请参见@ReactPropGroup注解类源代码中的文档来获取更多详情。
重要！ 在ReactJS里，修改一个属性会引发一次对设置方法的调用。有一种修改情况是，移除掉之前设置的属性。在这种情况下设置方法也一样会被调用，并且“默认”值会被作为参数提供（对于基础类型来说可以通过defaultBoolean、defaultFloat等@ReactProp的属性提供，而对于复杂类型来说参数则会设置为null）
@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");}
至此 , 我们的ReactWebViewManager类的内容就算写完了,下面是源码:
package com.githubdemo.reactManager;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 dongfanggouwu-zy on /4/2.*/public class ReactWebViewManager extends SimpleViewManager<WebView> {@Overridepublic String getName() {return "AndroidRCTWebView";}@Overrideprotected WebView createViewInstance(ThemedReactContext reactContext) {WebView webView = new WebView(reactContext);webView.setWebViewClient(new WebViewClient() {@Overridepublic 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");}}
4. 注册ViewManager
在Java中的最后一步就是把视图控制器注册到应用中。这和原生模块的注册方法类似，唯一的区别是我们把它放到createViewManagers方法的返回值里。
package com.githubdemo.reactManager;import com.facebook.react.ReactPackage;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 dongfanggouwu-zy on /4/2.*/public class AppReactPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Arrays.<ViewManager>asList(new ReactWebViewManager());}}
当然不要忘了 这个package需要在MainApplication.java文件的getPackages方法中提供:
public class MainApplication extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new AppReactPackage() //这个是我们自己要加的);}@Overrideprotected String getJSMainModuleName() {return "index";}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}@Overridepublic void onCreate() {super.onCreate();SoLoader.init(this, /* native exopackage */ false);}}
这里有一个需要注意的地方ReactWebViewManager 是我们自己写的,所以导入包的时候 不要导错了 ,如果你自己起了别的名字 可能会跟android内部的一些类名方法相同,需要特别注意.
5. 实现对应的JavaScript模块
整个过程的最后一步就是创建JavaScript模块并且定义Java和JavaScript之间的接口层。大部分过程都由React底层的Java和JavaScript代码来完成，你所需要做的就是通过propTypes来描述属性的类型。
// WebView.js/*** Created by 卓原 on /4/2.* zhuoyuan93@*/import {requireNativeComponent,View,} from 'react-native';import PropTypes from 'prop-types';let iface = {name: 'WebView',propTypes: {url: PropTypes.string,html: PropTypes.string,...View.propTypes // 包含默认的View的属性}};module.exports = requireNativeComponent('AndroidRCTWebView', iface);
requireNativeComponent通常接受两个参数，第一个参数是原生视图的名字，而第二个参数是一个描述组件接口的对象。组件接口应当声明一个友好的name，用来在调试信息中显示；组件接口还必须声明propTypes字段，用来对应到原生视图上。这个propTypes还可以用来检查用户使用View的方式是否正确。
注意，如果你还需要一个JavaScript组件来做一些除了指定name和propTypes以外的事情，譬如事件处理，你可以把原生组件用一个普通React组件封装。在这种情况下，requireNativeComponent的第二个参数变为用于封装的组件。这个在后文的例子里面用到。
译注：和原生模块不同，原生视图的前缀RCT不会被自动去掉。
正式使用:
/*** Created by 卓原 on /3/1.* zhuoyuan93@*/import React from 'react';import {View} from 'react-native';import WebView from '../common/WebView';export default class FavoritePage extends ponent {render() {return (<View><WebViewurl=""style={{width: 200, height: 400}}/></View>)}}
现在 你封装的原生组件就已经可以在RN上面使用了.
但是,这还只是最基础的将原始UI组件显示出来，如果你想再RN端进行一些事件处理的话,还要一些操作,而更为常见的却是事件，比如我们需要在javascript层处理这个WebView的滚动事件，这时候又要怎么做呢。
事件
现在我们已经知道了怎么导出一个原生视图组件，并且我们可以在JS里很方便的控制它了。不过我们怎么才能处理来自用户的事件，譬如缩放操作或者拖动？当一个原生事件发生的时候，它应该也能触发JavaScript端视图上的事件，这两个视图会依据getId()而关联在一起。
这时候我们就需要继承WebView，重写对应的事件，然后将事件传递给javascript层了
package com.githubdemo.rctViews;import android.content.Context;import android.util.AttributeSet;import android.util.Log;import android.webkit.WebView;import com.facebook.react.bridge.Arguments;import com.facebook.react.bridge.ReactContext;import com.facebook.react.bridge.WritableMap;import com.facebook.react.uimanager.events.RCTEventEmitter;/*** Created by dongfanggouwu-zy on /4/2.*/public class RCTWebView extends WebView {public RCTWebView(Context context) {super(context);}public RCTWebView(Context context, AttributeSet attrs) {super(context, attrs);}public RCTWebView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);Log.e("TAG", "onScrollChanged");WritableMap event = Arguments.createMap();event.putInt("ScrollX", l);event.putInt("ScrollY", t);ReactContext reactContext = (ReactContext) getContext();reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "topChange", event);}}
我们重写了滚动时回调的onScrollChanged方法，构造了一个WritableMap 对象，将ScrollX和ScrollY传入，然后调用reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), “topChange”, event);将事件发生到javascript层，注意topChange对应着javascript层的onChange方法，这个映射关系在UIManagerModuleConstants类中。
然后我们需要修改ReactWebViewManager 中的createViewInstance方法，在里面返回我们实现的子类，就像这样子
...public class ReactWebViewManager extends SimpleViewManager<WebView> {...@Overrideprotected WebView createViewInstance(ThemedReactContext reactContext) {WebView webView = new RCTWebView(reactContext); //这里就改成我们重写的WebViewwebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});return webView;}...}
而javascript层也需要进行一定程度的改造，以前的WebView.js已经无法满足我们的需求了.最终的代码如下,
/*** Created by 卓原 on /4/2.* zhuoyuan93@*/'use strict';import React from 'react';import {requireNativeComponent,View} from 'react-native';import PropTypes from 'prop-types';var RCTWebView = requireNativeComponent('AndroidRCTWebView', WebView, {nativeOnly: {onChange: true}});export default class WebView extends ponent {static propTypes = {url: PropTypes.string,html: PropTypes.string,onScrollChange: PropTypes.func,...View.propTypes // 包含默认的View的属性};constructor(props) {super(props);}_onChange(event: Event) {if (!this.props.onScrollChange) {return;}this.props.onScrollChange({ScrollX: event.nativeEvent.ScrollX, ScrollY: event.nativeEvent.ScrollY});}render() {return (<RCTWebView {...this.props} onChange={(event) => this._onChange(event)}/>)}}/*let iface = {name: 'WebView',propTypes: {url: PropTypes.string,html: PropTypes.string,...View.propTypes // 包含默认的View的属性}};module.exports = requireNativeComponent('AndroidRCTWebView', iface);*/
在onChange函数中，我们进行判断，如果属性onScrollChange没有设置或者为false，就直接return，否则就调用设置的onScrollChange属性值（该值是一个函数类型），将Java层传入的两个参数传到该函数中去，{ScrollX:event.nativeEvent.ScrollX,ScrollY:event.nativeEvent.ScrollY}
然后我们来进行调用:
export default class FavoritePage extends ponent {constructor(props) {super(props);this.state = {a: 22}}render() {return (<View><WebViewonScrollChange={this.onWebViewScroll}url={""}style={{width: 200, height: 200}}/><Text onPress={() => this.setState(preState => {a: preState.a++}, console.log(this.state.a))}>aaa</Text></View>)}onWebViewScroll(event) {console.log(event);}}
之后我们在WebView上滑动 就会在后台打印数来数据了~
如果觉得《ReactNative 原生UI组件 桥接原生 Android》对你有帮助，请点赞、收藏，并留下你的观点哦！
