Question

React-Native-Android怎么封装原生组件

Answer 1

　Android React Native 已经将几个常用的原生组件进行了封装，比如 ScrollView 和 TextInput，但是并不是所有系统的原始组件都被封装了，因此有的时候不得不自己动手封装一下，从而能够使用那些React Native没有为自己封装的原生组件，比如WebView，官方并没有提供Android端的实现，那么现在就动手封装一下WebView。

　　之前一篇文章Android React Native使用原生模块，而使用原生UI组件的方法和使用原生模块的方法十分类似。

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

　　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的注册。

　　public class AppReactPackage implements ReactPackage {
　　@Override
　　public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

　　return Collections.emptyList();;
　　}

　　@Override
　　public List<Class<? extends JavaScriptModule>> createJSModules() {
　　return Collections.emptyList();
　　}

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

　　将这个ReactPackage添加到ReactInstanceManager实例中去

　　.addPackage(new AppReactPackage())

　　然后在javascript层新建一个WebView.js文件。输入下面的内容

　　'use strict';

　　var { requireNativeComponent,PropTypes } = require('react-native');

　　var iface = {
　　name: 'WebView',
　　propTypes: {
　　url: PropTypes.string,
　　html: PropTypes.string,
　　},
　　};

　　module.exports = requireNativeComponent('RCTWebView', iface);

　　可以看到，只是在里面指定了属性的类型。

　　到目前为止，已经可以使用这个WebView组件了。

　　var WebView=require('./WebView');