Question

我正在制作一个非常简单的本机应用程序，该应用程序是一种健康跟踪器，类似于三星的健康类型做法。

基本上，在此示例中，有一个带有按钮的血糖卡，该按钮弹出一个模态并允许用户输入当天的血糖。目前，此操作可以在状态下使用，但是如果应用已关闭并重新打开，则数据将丢失。

我要做的就是使用状态退出开发，而是使用数据库解决方案，最好是将SQLite用于expo，因为这都是内置在expo中的。

它离线，所以我只希望它使用其本地设备，但用户将登录并记录当天的信息，因此我想跟踪数据和日期/时间，以便将其保留在当天，第二天对于他们的新数据将是空的，并将其拉入图表一段时间。

我已经实现了expo sqlite，但是我不知道如何开始，所以我只从简单的const db和transaction行开始，但是这些示例让我迷失了。我如何才能从这里开始说一个“血糖”表，我将在其中存储他们的数据和日期？

import React, { Component } from 'react';
import Expo, {SQLite, FileSystem} from 'expo';
import { StyleSheet, Text,  View, Dimensions, Button, ScrollView, TouchableOpacity, TextInput, Alert} from 'react-native';
import { Pedometer } from "expo-sensors";
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart
} from "react-native-chart-kit";
import PedometerChart from './PedometerChart';
import Icon from '@expo/vector-icons/Ionicons';
import MatIcon from '@expo/vector-icons/MaterialCommunityIcons';
import NumericInput from 'react-native-numeric-input';
import Modal from 'react-native-modal';
import moment from 'moment';

const db = SQLite.openDatabase('myDB.db');

db.transaction(tx => {
tx.executeSql('create table if not exists users (id integer);')
});

export default class Dashboard extends Component{

    state = {

    bloodGlucose: '',
    isGlucoseModalVisible:false,
    currentDate: new Date(),
    markedDate: moment(new Date()).format("YYYY-MM-DD")
  };

  toggleGlucoseModal = () => {
    this.setState({ isGlucoseModalVisible: !this.state.isGlucoseModalVisible });
  };


  render() {
    const today = this.state.currentDate;
    const day = moment(today).format("dddd");
    const date = moment(today).format("MMMM D, YYYY");

    return(
        <ScrollView>
        <View style={styles.container}>

        <View style={styles.mainContainerLast}>
          <Text style={styles.dateText}>{day} {date}</Text>
        </View>


      <View style={styles.mainContainer}>
        <View style={styles.widgetContainer}>
            <Icon  name="md-water" size={50} />
            <Text style={styles.titleText}>Blood Glucose</Text>
        </View>
        <View style={styles.widgetContainer}>
            <Text>
              <Text style={styles.textUnderlines}>
              {this.state.bloodGlucose}
              </Text>
              <Text style={styles.recordsTypes}>
              mg/dL
              </Text>
            </Text>
            <TouchableOpacity 
                style={styles.recordButton}
                onPress={this.toggleGlucoseModal}>
            <Text style={styles.recordText}>Record</Text>
            </TouchableOpacity>
        </View>
      </View>

      <Modal 
          isVisible={this.state.isGlucoseModalVisible}
          backdropOpacity={0.7}
          onBackdropPress={() => this.setState({ isGlucoseModalVisible: false })}
      >
        <View style={{ flex: 1 }}>
          <View style={styles.recordingModals}>
          <Text style={styles.titleText}>Blood Glucose for {date}</Text>
          <TextInput 
              value={this.state.bloodGlucose}
              onChangeText={(bloodGlucose) => this.setState({ bloodGlucose })}
              keyboardType="numeric" 
              underlineColorAndroid="#000" 
              style={styles.modalInput} 
              placeholder="mg/dL"/>
          <TouchableOpacity style={styles.recordButtonModal} onPress={this.toggleGlucoseModal}>
          <Text style={styles.recordText}>Save Entry</Text>
          </TouchableOpacity>
          </View>
        </View>
      </Modal>

      </ScrollView>
    ) ;
  }
}

使用EXPO的React-native应用程序，使用数据库选项进行日志记录

0 个答案: