本文共 6537 字，大约阅读时间需要 21 分钟。

背景

本周算是把一个 react native 版的商家管理工具（iOS 版花花内嵌商家后台）完成，所以现在花一点时间来把其中一些值得记录下的东西整理一下写出来。 根据 UI 设计，很多页面都采下图的展示方式：

可以看到，两个页面的结构相似：顶部都是若干个PickerIOS组件的集合（红色框部分），然后下面是不同的组件（蓝色框组件）。例如左图有3个PickerIOS而右图有4个PickerIOS，并且分别代表不同的筛选条件。左图中的内容组件包括一个图表以及一个列表，而右图只有一个列表。所以考虑把公共部分提取出一个公共组件，该组件可以实现：

1. 红色框内的PickerIOS数量以及内容可以定制。
2. 蓝色框内的内容组件可以作为一个属性传递给该组件，用来展示信息。
3. 切换筛选条件，能够向后端请求数据，并更新内容组件。

功能实现

顶部的Picker集合采用配置的方式实现，即单独创建一个配置文件模块DropdownViewConfig.js，文件内容大致如下：

每个 key（如 platform 和 date 等）对应一种 Picker 类型；value object 中的 key 对应向后端请求数据时的params key，value 为每个 Picker 中的选项，pName 为向后端请求时 key 对应的 value 值，name 为 Picker 上展示的文字；ajaxRequired 用来指示该 Picker 选中状态发生变化时，是否需要向后端发送 ajax 请求，因为有的筛选是在已请求到的数据中进行，此时无需进行后端请求。

然后新建DropdownView.js模块，即本文要介绍的自定义容器组件。首先设置组件的state：

然后在挂载组件的时候，根据传来的dropMenus属性，从配置模块中找到对应的 Picker 选项来初始化 Picker 集合。

然后还要写一些方法用来向后端请求数据的方法getData()，以及设置请求参数的方法setParams。 Picker 的值发生改变时，需要进行选项的状态处理；以及在关闭弹出的选择框后，需要执行筛选操作。

最后是render函数。

最后在其他模块中引用上面定义的组件DropdownView，首先选择 Picker 配置，然后创建内容组件，最后嵌入DropdownView中。示例代码如下：

以上就是主要的实现代码。