native react 二级菜单_React Native 下拉菜单容器实现

背景

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

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

红色框内的PickerIOS数量以及内容可以定制。

蓝色框内的内容组件可以作为一个属性传递给该组件，用来展示信息。

切换筛选条件，能够向后端请求数据，并更新内容组件。

功能实现

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

/**

* dropdown目录配置文件

* @author jzguo

*/

module.exports={

// 通用平台目录

platform:{// 顶部Dropdown目录集合

key:'plat',// 用于数据请求参数key

value:[{

pName:'',// 数据请求参数value

name:'全平台',// 顶部Dropdown标题显示

},{

pName:'pc',

name:'PC端',

},{

pName:'mob',

name:'移动端',

}],

ajaxRequired:true,// 切换改drop时是否发送ajax请求，若非则仅切换不同展示字段

},

date:{

key:'type',

value:[{

pName:'week',

name:'最近7天',

},{

pName:'month',</