时间戳

首页 > 解决方案 > 创建 JSON 文件反应原生并加载到数据库中

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

问题描述

我有个问题。我使用 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>

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

标签： javascriptreact-native

解决方案

如果您不需要查询数据，那么您可以简单地使用 AsyncStorage。

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

请参阅下面的代码。

第一个片段

这是一个基本模块，它导出2个方法，1个保存数据，另一个加载数据。使用该模块保存的数据被持久化，即写入磁盘。

请注意，保存的所有数据都是通过 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 个方法。

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。如果这是您的问题，那么到目前为止还不清楚。如果是，那么看看使用 fetch（见下面的链接）将您的数据发送到您的 API。

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

免责声明：上面的代码未经测试！

祝你好运！

推荐阅读