如何追踪React Native UI组件库的组件使用统计数据？

针对你的需求，这里有几个实用的方案，无需依赖Figma：

1. 内部代码扫描脚本 #

直接遍历所有内部应用仓库，通过静态代码分析统计组件使用情况：

• 用Node.js脚本搭配glob遍历内部仓库目录，读取每个仓库的package.json确认是否依赖你的UI组件库。
• 借助@babel/parser或TypeScript的AST解析器，扫描源码中的import语句，统计每个组件的导入次数及对应仓库。
• 将统计结果汇总到数据库或可视化表格，就能直观看到组件使用率排行、关联仓库等数据。
• 优势：完全基于代码事实，数据精准；无需修改组件库或应用代码；适配私有内部仓库场景。

2. 组件库内置轻量埋点 #

在组件库核心组件中加入极简统计逻辑，上报数据到内部统计服务：

• 在组件初始化生命周期（如函数组件的useEffect、类组件的componentDidMount）中，判断生产环境后上报事件，携带组件名称、应用标识（可让应用通过环境变量传入APP_ID）。
• 示例代码：

import { useEffect } from 'react';
import { TouchableOpacity } from 'react-native';

const Button = ({ children, ...props }) => {
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      // 替换为内部统计服务的上报方法
      window.__internalAnalytics?.track('component_usage', {
        componentName: 'Button',
        appId: process.env.REACT_APP_ID
      });
    }
  }, []);

  return <TouchableOpacity {...props}>{children}</TouchableOpacity>;
};

export default Button;

• 优势：能获取线上真实使用频率；可区分不同应用的使用情况；劣势：需修改组件库代码，依赖应用配合配置标识。

3. CI/CD流程集成统计 #

在内部应用的CI构建流程中加入统计步骤，自动收集使用数据：

• 在每个应用的CI脚本里添加依赖分析步骤，比如用madge生成依赖图谱，或用自定义脚本扫描组件使用情况。
• 将每次构建的统计结果上传到中央统计系统，定期汇总生成报表。
• 优势：自动化程度高，无需手动操作；能持续跟踪组件使用的变化；劣势：依赖CI流程规范，仅能统计触发构建的分支。

4. 内部组件文档平台联动 #

如果有内部组件文档站（如基于Storybook搭建），可结合文档访问数据与代码统计数据：

• 在Storybook中添加自定义插件，记录每个组件文档的访问量作为辅助参考。
• 在文档页面提供入口，让各应用团队主动登记组件使用情况，补充代码扫描覆盖不到的场景。
• 优势：结合文档热度与实际使用数据；方便团队直观查看组件受欢迎程度；劣势：主动登记的数据可能存在误差。

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