微信号:codedev123

介绍:每天推送分享移动开发技术(Android/iOS);React Native技术文章;项目管理;程序猿日常点滴以及精品技术资讯文章.

React Native封装原生UI组件与『仿QQ』消息滑动删除组件封装(数据篇)

2016-06-09 08:31 hiphonezhu

阅读本文大约需要5分钟


投稿详情

端午第一节过节快乐哈~德玛西亚万岁。本文由hiphonezhu投稿,主要讲解原生UI组件封装以及实现『仿QQ』消息滑动删除组件封装实例。博客地址(底部阅读原文):http://www.jianshu.com/p/40e173fd5350

前言

总所周知,移动App快速发展的这几年,用户对于交互体验(UI、UE)的要求越来越高,因此,在原生开发中涌现了很多优秀的UI组件。ReactNative做为一个新的技术方向,目前在UI组件的积累难免还没有原生那么丰富和强大,所以我们必须要学会如何在ReactNative中使用一些我们已有的原生UI组 件,并能和这些组件进行“交流”(数据、事件等)。

本文会演示如何在ReactNative中使用“仿QQ”滑动删除消息组件SwipeMenuListView,对这个控件不熟悉的同学请先查看官方说明,本篇文章的最终效果图如下


正如上图所演示的,使用原生UI会涉及到"数据""事件"两个部分,由于篇幅较长,我们会分成上下两篇文章讲解,本篇文章会讲解"数据"部分。

那么,下面我们将一步步演示如何实现上面这个图的效果

步骤一

     使用下面的命令新建一个ReactNative项目

react-native init Demo4

      让我们运行下新建的项目,效果如下

步骤二

        在原生项目中引入SwipeMenuListView,使用AndroidStudio打开Demo4目录下的android文件夹,打开app目录下的build.gradle文件,在dependencies节点中加入以下部分


步骤三

        导出原生视图SwipeMenuListView给JS模块使用。原生视图需要被ViewManager创建和管理,这样才能被JS模块使用。ViewManager是一个抽象的类,我们可以使用它的派生类SimpleViewManager来实现,另外SimpleViewManager还可以将我们的原生视图的属性导出给JS模块,这样我们在JS模块就可以传递数据给原生视图(或变量、属性等)来改变原生视图的样式和行为。提供原生视图的步骤如下:

  1. 创建一个SimpleViewManager的子类AppViewManager

  2. 实现createViewInstance方法

  3. 导出视图的属性:使用@ReactProp注解来导出属性的设置方法

  4. 注册视图

  5. 实现JS模块

第4步与原生模块比较一致,原生模块和UI都需要注册才能使用,下面我们将详细介绍这5个步骤。

3.1.创建一个SimpleViewManager的子类


这个例子里我们创建一个视图管理类AppViewManager,它继承自SimpleViewManager<SwipeMenuListView>,SwipeMenuListView是这个视图管理类所管理的对象类型,这应当是一个自定义的原生视图,getName方法会用于JS端引用这个原生视图。

3.2.实现createViewInstance方法

   

这里,我们直接new一个SwipeMenuListView,然后使用setMenuCreator方法设置菜单,我们写了一个initMenu方法来封装菜单的实现过程,由于这里不是本文介绍的重点,这里不做分析,有兴趣的朋友可以查看文章最后的源代码。

3.3.导出视图的属性:使用@ReactProp注解来导出属性的设置方法

这里我们引用官方的说明:

要导出属性给JS使用,需要申明带有@ReactProp注解的设置方法。方法的第一个参数是要修改属性的视图实例,第二个参数是要设置的属性值。方法的返回值类型必须为void,而且访问控制必须被声明为public。JavaScript所得知的属性类型会由该方法第二个参数的类型来自动决定。支持的类型有:boolean, int, float, double, String, Boolean, Integer,ReadableArray, ReadableMap。
      这个方法做的事情很简单,主要是将ReadableArray类型的数据转换为我们熟知的ArrayList,然后使用MyAdapter为SwipeMenuListView绑定一个数据源。MyAdapter也很简单,它的布局仅有一个TextView,这里不做分析。

3.4.注册视图

       在Java中的最后一步就是将视图控制器注册到应用中,我们需要新建一个class:ReactPackager,并且实现ReactPackage接口。不同的是,原生模块需要添加到createNativeModules中,而原生UI则需要添加到createViewManagers中。
当然,AppReactPackage需要在MainActivity的getPackages中注册并返回。
3.5.实现JS模块

       我们需要新建一个JS文件,来描述我们在AppViewManager中getName方法返回的SwipeMenuListView


requireNativeComponent通常接受两个参数:

  • 第一个参数是AppViewManager中getName方法返回的视图名称。

  • 第二个参数是一个描述UI组件接口的对象,这个对象通常包括两个重要的部分:

name:便于调试时显示(你可以设置为任意字符串)。

propTypes:用来声明@ReactProp(name = "array")注解中array参数的JS类型,这里PropTypes.arrayOf(PropTypes.string)表示字符串类型的数组。另外...View.propTypes用来声明View的默认属性,记住这一个声明是必须的,否则你将无法正确使用原生UI。

最后,我们看下如何在JS模块使用这个原生UI

      这里需要说明的是,一定要指明SwipeMenuListView的高度和宽度,否则无法显示。本文主要讲解了封装UI组件封装数据篇,下一篇会继续更新事件篇,相信大家通过两篇文章的学习一定会熟悉完成封装原生组件的。

源码下载地址:

https://github.com/hiphonezhu/RN-Demos/tree/master/Demo4

最后说两句

       本公众号欢迎大家投稿,如果你希望你的文章可以被更多人看到,直接将md、doc等格式的文章到我邮箱即可(781931404@qq.com),也可以加我QQ/微信(781931404)好友,需要注明(投稿),谢谢。



 
江清清 更多文章 Android Design支持库TabLayout打造仿网易新闻Tab标签效果 【最新消息】Android N将替代使用OpenJDK 【UIL框架】Universal-Image-Loader完全解析(一)之介绍与使用详解 干货分享:途牛Android App的插件实现 架构案例丨微信Android客户端架构演进之路
猜您喜欢 后端分布式系列:分布式存储-HDFS NameNode 设计实现解析 互联网系统可靠性基础:正确的异常处理 DevOps 10大IT管理工具 明星科学家一夜成为罪人,他用16年进行自我救赎 | 科学人 爬取拉勾网招聘职位数据信息,并将结果保存出来.