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

 我来答
育知同创教育
2016-07-16 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
 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');
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式