创建JSON文件原生响应并加载到数据库中

时间:2019-08-26 09:38:37

标签: javascript react-native

我有一个问题。我使用React Native创建了一个应用程序,该应用程序与使用蓝牙与外部设备进行通讯。 当应用程序与两个外部设备连接时,我从其中恢复了数据流。我的问题是我应该创建一个json文件并加载到数据库中。我该怎么办?

我恢复了这种数据:

<View>
    <Text>Device Left: </Text>
    <Text>{"Time:" + this.state.time}</Text>
    <Text>{"Acc:" + this.state.acc.join(" ")}</Text>
    <Text>{"Gyr:" + this.state.gyr.join(" ")}</Text>
    <Text>{"Mg:" + this.state.mg.join(" ")}</Text>
    <Text>{"Pressure:" + pressure}</Text>
    <Text> ---- </Text>
    <Text>{"Message:" + this.state.info}</Text>
    <Text>-----------</Text>
</View>
<View>
    <Text>Device Right: </Text>
    <Text>{"Time:" + this.state.time}</Text>
    <Text>{"Acc:" + this.state.acc_dx.join(" ")}</Text>
    <Text>{"Gyr:" + this.state.gyr_dx.join(" ")}</Text>
    <Text>{"Mg:" + this.state.mg_dx.join(" ")}</Text>
    <Text>{"Pressure:" + pressure}</Text>
    <Text> ---- </Text>
    <Text>{"Message:" + this.state.info}</Text>
    <Text>-----------</Text>
</View>

所以我有来自这两个设备的连续数据流。当我单击停止按钮时,我应该将数据加载到db中。

1 个答案:

答案 0 :(得分:2)

如果您不需要查询数据,则只需使用AsyncStorage。

https://github.com/react-native-community/async-storage

请参见下面的代码。

第一段

这是一个基本模块,可导出2种方法,一种用于保存数据,另一种用于加载数据。使用此模块保存的数据将持久保存,即写入磁盘。

请注意,所有保存的数据均通过JSON.stringify传递,然后在返回的途中进行解析。这有助于保存非原始类型,例如对象。

import AsyncStorage from '@react-native-community/async-storage';

/*
* @function saveDeviceData This will write the data to disk, with a given key, this * could be written to a SQLite DB file, a flat file, AsyncStorage is an abstract 
* wrapper around this. 
* @param key {String} Key identifier
* @param data {any} Data to save for the given key
*/
export const saveDeviceData = async (key, data) => {
    try {

        await AsyncStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.log(`Error saving data for key ${key}`, data);
      throw e;
    }
};


/*
* @param key {String} Key identifier for data to load
*/
export const loadDeviceData = async (key) => {
    try {

        return JSON.parse(await AsyncStorage.getItem(key);
    } catch (e) {
      console.log(`Error loading data for key ${key}`);
      throw e;
    }
};

第二个片段

这是组件的基本示例,它有2种方法,一种用于加载数据,另一种用于保存数据。该组件呈现2个按钮,这些按钮绑定到这2个方法。

import React, {Component} from "react";
import {saveDeviceData, loadDeviceData} from "./the-module-example-above";

class App extends Component {

    loadData = async () => {
        let data;
        try {
             data = await loadDeviceData("foo"); // example, this would return undefined
        } catch (e) {}

        console.log(data);
    };

    saveData = async () => {

        // This represents your data, this is just a placeholder example.
        const someJSON = [
             { field: 1},
             { field: 2},
             { field: 3}
            // Etc...
        ];

        try {
            await saveDeviceData("foo", someJSON);
        } catch (e) {}
    };

    render () {

        return (
            <>
                <Button onPress={this.saveData} title="Save data"/>
                <Button onPress={this.loadData} title="Load data"/>     
            </>
        );
    }
}

如果您在项目中设置此代码,并在代码段2中呈现了该组件,请单击按钮并观察调试环境提供的控制台。

如果您需要查询数据,那么我认为最好是使用SQLite,您可以为此使用另一个库。 https://github.com/craftzdog/react-native-sqlite-2

最后,如果您需要将数据存储在远程数据库中,例如托管在您自己的服务器上,或与所选的云提供商一起托管,那么您需要查看发出http POST / PUT请求,以将该数据发布到处理该数据的API上。如果这是您的问题,到目前为止还不太清楚。如果是这样,请查看使用提取(请参见下面的链接)将数据发送到API。

https://facebook.github.io/react-native/docs/network

免责声明:上面的代码未经测试!

祝你好运!