如何在React Native中创建和保存CSV文件? [英] How to create and save CSV files in React Native?

问题描述

我的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，z12,15,17 

解决方案

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

我们首先将值数组转换为字符串.如果我们的值用，逗号分隔，而我们的行用 \ n 换行符分隔，则我们的字符串是 csv .我们可以使用该字符串，将其写入扩展名为 .csv 的文件中，而 voila 我们有一个 .csv 文件.

这是执行此操作的代码:

 从'react-native-fetch-blob'导入RNFetchBlob;常量值= [['build'，'2017-11-05T05:40:35.515Z']，['deploy'，'2017-11-05T05:42:04.810Z']];//构造csvStringconst headerString ='事件，时间戳\ n';const rowString = values.map(d =>`$ {d [0]}，$ {d [1]} \ n`).join('');const csvString =`$ {headerString} $ {rowString}`;//将当前答案列表写入本地csv文件const pathToWrite =`$ {RNFetchBlob.fs.dirs.DownloadDir}/data.csv`;console.log('pathToWrite'，pathToWrite);//pathToWrite/storage/emulated/0/Download/data.csvRNFetchBlob.fs.writeFile(pathToWrite，csvString，'utf8').then(()=> {console.log(`写文件$ {pathToWrite}`);//写入文件/storage/emulated/0/Download/data.csv}).catch(错误=> console.error(错误)); 

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

如果有帮助，我还将分享一个链接到我的react-native项目中的等效代码

My React Native app (on android only) is a basic app that will collect some sensors data when users start recording video. I have three arrays of sensors data: accelerometer, gyroscope, and light. I want to save them to the device as .csv files so I can use them for the next steps. Currently, I can save them in .txt (using react-native-fs, but they do not support .csv extension) but what I want is .csv. Is there any way to do that in React Native?

Data will look like this:

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]

Desired .csv, for example accelerometer.csv:

x ,y ,z
12,15,17

解决方案

You can use react-native-fetch-blob to write to the device's file system. (I was wondering this too!)

We start by converting an array of values to a string. If our values are separated by , commas and our rows are separated by \n newlines, then our string is csv. We can take that string, write it to a file with a .csv file extension, and voila we have a .csv file.

here's code that does just this:

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));

this approach worked for me on an Android 7.x test device.

in case it's helpful, I'll also share a link to the equivalent code inside my react-native project

这篇关于如何在React Native中创建和保存CSV文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！