Question

My 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文件扩展名的文件，然后 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));

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

如果它有用，我还会在我的反应原生项目中共享link to the equivalent code

Answer 2

其他方式

    createFile = () => {
    csvString = `${HEADER}`;
    RNFetchBlob.fs
        .writeFile(FILE_PATH, csvString, "utf8")
        .then(() => {
            alert("File created succesfully");
            this.saveData(JSON.stringify([]));
            this.setState({
                users: []
            });
        })
        .catch(error => console.error(error));
};

writeCSV = () => {
    try {

        let rowData = [{
            Name: "ABC",
            MobileNo: 9999999999,
            Age: 23
        }, {
            Name: "DEF",
            MobileNo: 9999999998,
            Age: 24
        }]


        const csvString = `${HEADER}${this.ConvertToCSV(rowData)}`;
        RNFetchBlob.fs
            .writeFile(FILE_PATH, csvString, "utf8")
            .then(() => {
                alert("File updated succesfully");

            })
            .catch(error => alert(error));

    } catch (error) {
        // Error retrieving data
    }
};


ConvertToCSV = objArray => {
    var array = typeof objArray != "object" ? JSON.parse(objArray) : objArray;
    var str = "";

    for (var i = 0; i < array.length; i++) {
        var line = "";
        for (var index in array[i]) {
            if (line != "") line += ",";

            line += array[i][index];
        }

        str += line + "\r\n";
    }

    return str;
};

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

2 个答案: