rn 实现上下滑动选择列表_RN开发实践之实现一个可动态配置模块的列表页面

原标题：RN开发实践之实现一个可动态配置模块的列表页面

最近一段时间一直在做RN相关的需求，也写了很多的RN页面，这些页面多是用列表来组织的。相似的页面写的多了就会想要形成一个套路化的模块配置方案，在以后的开发中可以提高效率。所以就想着设计一个可动态配置的方案。下面就将整个方案思考过程拿出来同大家分享一下。

动态配置模块

首先最想要实现的目标就是可以根据接口协议去动态配置前端模块的展示。要实现这个功能并不是很麻烦。只要我们对协议进行模块分割，增加类型标识，使用switch就可以很方便的实现我们的目的，甚至if...else都是可以的。

renderItems = ({ item, index }) => { switch (item.type) { case 'A': return (); case 'B': return (); default: return (); }}

但是如果这样的页面多了，比如一个App有十几个这样的页面，那么同样的switch就要重复的写十几遍，造成了严重的代码冗余。

想要减少这种冗余将协议匹配模块的逻辑抽取出来，利用提前配置好的键值映射就是一个更好的选择了。

const itemsConfig = { A: require('./ComponentA').default, B: require('./ComponentB').default,}; renderItems = ({ item, index }) => { return itemsConfig[item.type]||;}

这样就算有十几个页面，也可以通过这个提前配置好的键值映射去动态配置了。

模块的状态管理

实现了模块动态地配置后，下一个要解决的问题就是如何使不同模块在管理自己的状态的同时还可以进行模块间的状态同步。

在这里需要补充一点的是，我们是通过Mobx框架来管理状态的。Mobx与官方主推的Redux相比它的好处主要是学习成本低并且简单易于上手。本文下面的内容则将会或多或少包含一些Mobx相关的内容，建议对Mobx不熟悉的同学可以点击此处了解一下Mobx。

利用Mobx框架为每个模块创建了对应的状态管理对象。

这里的状态管理对象可以看做是一个同模块一一对应的特殊对象，它的主要任务有两个：

管理组件的状态。

处理组件内部的业务逻辑。

由于设计了状态管理对象，那么之前动态配置模块的逻辑中的数据对象item就可以替换成对应的状态管理对象了。

const managersConfig = { A: require('./ManagerA').default, B: require('./ComponentB').default,};...listManager.listData = data.map((item,index) => { const ManagerClass = managersConfig[item.type]; const manager = new ModelClass(item); return manager;}); const itemsConfig = { A: require('./ComponentA').default, B: require('./ComponentB').default,};...renderItems = ({manager, index }) => { return itemsConfig[manager.type]||;}

这样的话就可以很方便地对各个模块的状态进行分别管理了，模块manager可以通过设计好的Api同步状态给列表listManager，再由列表listManager根据不同业务同步给不同的其他模块manager。

共有组件与私有组件

由于有了模块配置，当某些模块没有与其他模块同步状态的需求时，这些模块是可以拆分出来作为共有组件给任何页面使用的。这样就引出了另一个问题，如何支持共有与私有组件。

为了解决这个问题，又设计了一个与列表绑定的工厂对象去负责生成每个列表所需要的managers和Components。工厂对象内有一个共有组件的配置表。当然在列表创建时，可以给工厂对象设置私有组件的配置。

import { publicManagers, publicComponents } from './configs';export default class Factory { privateManagers = {}; privateComponents = {}; constructor({ privateComponents, privateManagers }) { this.privateComponents = privateComponents; this.privateManagers = privateManagers; } managerGenerate = (item) => { const {type} = item let ManagerClass = null; if (this.privateManagers && this.privateManagers[type]) { ManagerClass = this.privateManagers[type]; } else { ManagerClass = publicManagers[type]; } const model = new ModelClass({ dataDict: elm, type }); return model; } obtainComponentClass = ({ item }) => { let ComponentClass; if (this.privateComponents && this.privateComponents[item.type]) { ComponentClass = this.privateComponents[item.type]; } else { ComponentClass = publicComponents[item.type]; } return ComponentClass || View; }}

这样就可以解决公有和私有组件的问题了。

总结

通过以上的思考过程，基本上成形了一个套路化的列表模块动态配置的方案，在组件化的基础上引入了动态化的特性，后续开发则更多地将注意力放在组件的研发上，而不用刻意关注页面。在这个思考过程中，进一步加深了我对于组件化的理解。现在我将这个过程跟大家分享出来，希望跟大家一起学习进步。返回搜狐，查看更多

责任编辑：