React Native移动端实现按钮点击导出JSON为CSV的方案咨询

不适配问题的核心原因 #

之前调研的多数CSV工具包面向Web场景开发，内部逻辑强依赖浏览器全局API（比如Blob、a标签触发下载、FileReader），而React Native的JS运行环境不存在这些Web专属对象，直接引入会抛出全局变量未定义的运行时错误，无法正常工作。

可直接适配的技术选型 #

• react-native-fs：原生桥接实现的文件操作能力，无Web依赖，支持Android端应用专属存储、公共下载目录的文件读写，是导出链路的核心基础能力
• fast-csv（纯JS转换分支）：多数人以为这类CSV库仅支持Web场景，实际只要指定加载裁剪了Web端Blob、浏览器下载逻辑的分支，仅保留JSON到CSV字符串的格式转换能力，就可以直接在RN环境运行，不会触发Web API报错
• expo-file-system：如果是基于Expo搭建的项目，可直接替代原生集成的react-native-fs，无需额外配置原生模块，适配成本更低

零依赖手动实现技巧 #

针对常规结构化的JSON数组，完全可以不引入第三方转换工具，仅靠原生JS完成CSV格式拼接，彻底规避Web依赖问题：

• 提取JSON数组所有对象的非重复键作为CSV表头，遇到嵌套结构可按层级展平成固定键名
• 逐单元格做格式转义：如果单元格内容包含逗号、换行符、双引号，需要用双引号包裹整个单元格，单元格内部的双引号替换为两个连续双引号，避免CSV列分隔错乱
• 拼接完整CSV文本时，在文件开头加上UTF-8 BOM头（\ufeff），防止用Excel打开时出现中文乱码
• 直接通过文件系统API把拼接好的字符串写入目标路径，不要套用Web端“生成Blob对象-创建下载链接-触发点击下载”的流程，RN环境下该流程无法运行

Android端落地注意事项 #

• 若需要将导出的CSV存到公共下载目录，需要在AndroidManifest.xml中配置对应存储权限，Android 10及以上版本可适配分区存储机制，不需要申请全量文件访问权限
• 导出完成后可直接调用系统文件选择器分享生成的CSV文件，无需额外开发文件预览逻辑
• 尽量避开papaparse、file-saver这类纯Web场景的工具包，这类包的默认运行逻辑无法在RN环境下正常执行

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