Reactnative 如何在 React Native 中创建和保存 CSV 文件

发布于11月05日

我的React原生应用(仅在android上)是一款基本应用，当用户开始录制视频时，它会收集一些传感器数据.我有三个数据传感器数组:加速计、陀螺仪和光.我想将它们作为.csv个文件保存到设备中，以便在接下来的步骤中使用它们.目前，我可以将它们保存在.txt中(使用react native fs，但它们不支持.csv扩展)，但我想要的是.csv.有没有什么办法可以做到这一点？

数据如下所示:

this.accelerometer = [
  {x: 12, y: 15, z: 17},
  {x: 12, y: 15, z: 17},
  ...
  {x: 12, y: 15, z: 17},
]

this.gyroscope = [
  {x: 12, y: 15, z: 17},
  {x: 12, y: 15, z: 17},
  ...
  {x: 12, y: 15, z: 17},
]

this.light = [6, 7, 8, 9, 10,.., 11]

期望的.csv，例如accelerometer.csv:

x ,y ,z
12,15,17

推荐答案

您可以使用react-native-fetch-blob写入设备的文件系统.(我也在想这个！)

我们首先将一个值数组转换为一个字符串.如果我们的值被,个逗号分隔，行被\n个换行符分隔，那么我们的字符串是csv.我们可以把这个字符串写入一个扩展名为.csv的文件，voila我们有一个.csv文件.

下面是实现这一点的代码:

import RNFetchBlob from 'react-native-fetch-blob';

const values = [
  ['build', '2017-11-05T05:40:35.515Z'],
  ['deploy', '2017-11-05T05:42:04.810Z']
];

// construct csvString
const headerString = 'event,timestamp\n';
const rowString = values.map(d => `${d[0]},${d[1]}\n`).join('');
const csvString = `${headerString}${rowString}`;

// write the current list of answers to a local csv file
const pathToWrite = `${RNFetchBlob.fs.dirs.DownloadDir}/data.csv`;
console.log('pathToWrite', pathToWrite);
// pathToWrite /storage/emulated/0/Download/data.csv
RNFetchBlob.fs
  .writeFile(pathToWrite, csvString, 'utf8')
  .then(() => {
    console.log(`wrote file ${pathToWrite}`);
    // wrote file /storage/emulated/0/Download/data.csv
  })
  .catch(error => console.error(error));

这种方法在安卓7上对我有效.x测试设备.

如果有帮助的话，我还会在react native项目中分享一个link to the equivalent code

Reactnative 如何在 React Native 中创建和保存 CSV 文件

推荐答案

React-native相关问答推荐

Appcenter构建失败错误号：：EEXIST -文件存在于syserr_fail2_in

条件呈现Else语句不会将样式应用于我的组件

复制__自持props

替换数组中的一个元素就是替换数组中的所有元素？

无法在 React Native iOS 模拟器中按 URI 显示图像

如何在react-native android中打开应用程序设置页面？

如何在 Crashlytics (Fabrics) 中有效地对非致命异常进行分组？

用hooks钩子react context上下文防止重新渲染

如何在 React Native cli 中获取 SHA-1 密钥？

在特定屏幕上使用react-navigation修改后退按钮

React Native Bullet Character？ or Unicode？

您将如何在 Alert 中模拟onPress？

按钮的标题属性必须是字符串

ListView 和 FlatList 有什么区别？

Jest TransformIgnorePatterns 所有 node_modules 用于 React-Native Preset

如何在android studio中导入react native元素

React Native 必须双击才能使 onPress 工作

React Native + Redux 基本认证

将现有的 React Native 项目转换为 Expo

移动应用程序不需要 CORS？