React Native布局实践：开发京东客户端首页（四）——首页功能按钮及控件封装(1/3)

本篇文章主要介绍了"React Native布局实践：开发京东客户端首页（四）——首页功能按钮及控件封装"，主要涉及到方面的内容，对于移动开发感兴趣的同学可以参考一下： 从我写第一篇React Native文章以来，我们几乎是把所有的代码都放在一个js文件中实现的，随着工程复杂度的增加，各种自定义控件的代码就和业务逻辑代码耦合严...

从我写第一篇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函数：

    render() {
        return (
            
                
                    
                    Example Text
                
            
        );
    }

下来是样式：

const styles = StyleSheet.create({
    iconImg: {
        width: 38,
        height: 38,
        marginBottom: 2
    }
});

这里我们可以看到，在render函数中，我并没有为Image指定source，Text也只是加了一串示例文本，不要着急，下面就是控件封装的关键！

3.声明控件属性