簡體   English   中英

創建JSON文件原生響應並加載到數據庫中

[英]Create JSON file react native and load in the DB

我有個問題。 我使用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中。

如果您不需要查詢數據,則只需使用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

免責聲明:上面的代碼未經測試!

祝好運!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM