如何统计布尔列表真值数量，实现React Native动态布局条件样式

通用真值统计函数实现 #

你要的统一统计真值的函数可以直接用剩余参数实现，支持传入任意数量的判断条件：

const getTrueCount = (...conditions) => conditions.filter(Boolean).length

注意：你现有的校验函数如果条件不满足会返回undefined而非布尔值false，建议统一修改为直接返回布尔值，避免隐式转换出现异常：

// 修改前
const hasSiteGuide = () => {
  if (!this.isEmpty(this.state.locationSiteGuidePdf)) {
    return true;
  }
};
// 修改后
const hasSiteGuide = () => !this.isEmpty(this.state.locationSiteGuidePdf)

其余hasInventoryItems、hasObservations以及后续新增的校验函数都按这个格式修改即可。

布局逻辑优化 #

你原来的layout_full/layout_one/layout_two系列函数不仅存在语法错误（layout_two中!hasInventoryItems() !hasObservations()缺少运算符），还存在逻辑漏洞，且新增展示项时需要修改所有布局判断函数，扩展性很差。用统计真值的方案可以完全规避这些问题：

// 统计当前需要展示的项数，后续新增项直接在参数末尾追加即可
const showItemCount = getTrueCount(
  hasSiteGuide(),
  hasInventoryItems(),
  hasObservations()
)

样式绑定优化 #

可以提前建立展示项数和样式的映射表，JSX中不需要再写一堆条件判断，后续新增展示项时只需要更新映射表即可：

// 项数和样式的映射关系，根据你的实际业务调整键值对应关系
const countStyleMap = {
  0: RP_Styles.btnWrap_one, // 0个展示项对应样式
  1: RP_Styles.btnWrap_two, // 1个展示项对应样式
  2: RP_Styles.btnWrap_three, // 2个展示项对应样式
  3: RP_Styles.btnWrap, // 3个展示项对应样式
  // 后续新增第4类展示项直接加下一行即可
  // 4: RP_Styles.btnWrap_four
}

JSX中的样式绑定可以简化为：

<View style={countStyleMap[showItemCount]}>

进一步扩展优化 #

如果后续展示项会持续新增，可以把所有校验函数统一存到数组中管理，新增时只需要往数组里加新的校验函数即可，不需要修改统计逻辑：

// 所有展示项的校验函数数组，新增项直接往数组里加
const showItemCheckers = [hasSiteGuide, hasInventoryItems, hasObservations]
// 统一执行所有校验函数统计真值数量
const showItemCount = getTrueCount(...showItemCheckers.map(checker => checker()))

内容的提问来源于stack exchange，提问作者Dancer