从我写第一篇React Native文章以来,我们几乎是把所有的代码都放在一个js文件中实现的,随着工程复杂度的增加,各种自定义控件的代码就和业务逻辑代码耦合严重,这篇文章就来解决这一问题,让我们一起来学习控件封装的方法。
1.明确需求
首页功能按钮由一个图片、一行文本,纵向排列组成,当点击一个控件时,同时触发点击事件。
目前我们需要的是8个这样的控件,如果我们为每个控件都写一堆JSX,那么代码就会很混乱,而如果我们在当前的JS文件中编写一个方法(如_renderButton()),专门用于生产这样的控件,虽然可以少写一些代码,但容易和其他业务逻辑代码耦合在一起,这样不便于维护和更新,所以,最好的办法是把这样一种组合视图,封装为控件,并单独写在一个JS文件中,此时,我们可以确定一下这个控件的属性:
①图片:用于展示的Icon,暂定为来自本地,为number类型
②标题:展示的标题,一串文本,为String类型
③Tag:用于区分按钮,为String类型
④回调函数:用于在点击该按钮时进行回调,为Function类型(回调时应该考虑回传Tag)
2.设计控件样式
首先我们在home目录中新建一个js文件,名为MenuButton.js,引入我们需要的Image、Text、View以及其他的常用库,Component、StyleSheet,同时创建一个可导出的类,如下图所示
接着,我们可以根据我们对按钮结构的分析,以及掌握的尺寸信息,在render方法中设计控件的布局,并创建控件的样式,由于这个控件的结构很简单,所以这里直接给出代码,首先是render函数: