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');