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

Question

我的React Native应用程序(仅限Android)是一个基本应用程序,可在用户开始录制视频时收集一些传感器数据.我有三个传感器阵列数据:加速度计,陀螺仪和光.我想将它们作为.csv文件保存到设备中,以便我可以将它们用于后续步骤.目前,我可以保存它们.txt(使用react-native-fs,但它们不支持.csv扩展)但我想要的是.csv.在React Native中有没有办法做到这一点？

数据如下所示:

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

Answer 1

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

我们首先将值数组转换为字符串.如果我们的值用,逗号分隔,并且我们的行由\n换行符分隔,那么我们的字符串是csv.我们可以把这个字符串,它写入一个文件.csv的文件扩展名,瞧我们有一个.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));

这种方法适用于Android 7.x测试设备.

如果它有用,我还将共享一个链接到我的react-native项目中的等效代码