ComputerBase Menü
Aktuelles

Balken zurücksetzten nach Datumswechsel (React Native)

P

PeterBaumler

Cadet 1st Year
Registriert
Sep. 2023
Beiträge
13
Hallo,

und zwar stehe ich ein bisschen auf dem Schlauch. Ich habe dieses React Native Programm und hätte gerne, dass wenn sich das Datum ändert und man die App neu startet, dass resetBalken(); aufgerufen wird bei dieser Funktion und sonst die Balken normal geladen werden. :



Javascript: 
  // Hier rufen Sie die gespeicherten Balkenhöhen aus AsyncStorage beim Komponentenstart ab
    useEffect(() => {
      const getBalkenHeights = async () => {
    try {
      const currentDate = new Date().toDateString();
      const storedDate = await AsyncStorage.getItem('storedDate');

      if (storedDate === null || storedDate !== currentDate) {
        await AsyncStorage.setItem('storedDate', currentDate);
        console.log('anders');
      } else {

          const sodiumHeightString = await AsyncStorage.getItem('sodiumHeight');
          // Überprüfen, ob die Balkenhöhe bereits in AsyncStorage gespeichert ist
          if (sodiumHeightString !== null) {
            
            setSodiumHeight(parseFloat(sodiumHeightString));
          } else {
            // Wenn nicht, setzen Sie den Startwert auf 0
            setSodiumHeight(0);
          }
 
          // Wiederholen Sie diesen Vorgang für alle Balkenhöhen
          const magnesiumHeightString = await AsyncStorage.getItem('magnesiumHeight');
          if (magnesiumHeightString !== null) {
            setMagnesiumHeight(parseFloat(magnesiumHeightString));
          } else {
            setMagnesiumHeight(0);
          }
 
          const calciumHeightString = await AsyncStorage.getItem('calciumHeight');
          if (calciumHeightString !== null) {
            setCalciumHeight(parseFloat(calciumHeightString));
          } else {
            setCalciumHeight(0);
          }
 
          const potassiumHeightString = await AsyncStorage.getItem('potassiumHeight');
          if (potassiumHeightString !== null) {
            setPotassiumHeight(parseFloat(potassiumHeightString));
          } else {
            setPotassiumHeight(0);
          }
 
          const lithiumHeightString = await AsyncStorage.getItem('lithiumHeight');
          if (lithiumHeightString !== null) {
            setLithiumHeight(parseFloat(lithiumHeightString));
          } else {
            setLithiumHeight(0);
          }
 
          const boronHeightString = await AsyncStorage.getItem('boronHeight');
          if (boronHeightString !== null) {
            setBoronHeight(parseFloat(boronHeightString));
          } else {
            setBoronHeight(0);
          }
 
          const carbohydrateHeightString = await AsyncStorage.getItem('carbohydrateHeight');
          if (carbohydrateHeightString !== null) {
            setCarbohydrateHeight(parseFloat(carbohydrateHeightString));
          } else {
            setCarbohydrateHeight(0);
          }
 
          const proteinHeightString = await AsyncStorage.getItem('proteinHeight');
          if (proteinHeightString !== null) {
            setProteinHeight(parseFloat(proteinHeightString));
          } else {
            setProteinHeight(0);
          }
 
          const sugarHeightString = await AsyncStorage.getItem('sugarHeight');
          if (sugarHeightString !== null) {
            setSugarHeight(parseFloat(sugarHeightString));
          } else {
            setSugarHeight(0);
          }
 
          const caffeineHeightString = await AsyncStorage.getItem('caffeineHeight');
          if (caffeineHeightString !== null) {
            setCaffeineHeight(parseFloat(caffeineHeightString));
          } else {
            setCaffeineHeight(0);
          }
          const fatHeightString = await AsyncStorage.getItem('fatHeight');
          if (fatHeightString !== null) {
            setFatHeight(parseFloat(fatHeightString));
          } else {
            setFatHeight(0);
          }
          console.log('gleich');
        
        }
      } catch (error) {
        console.error('Fehler beim Abrufen der Balkenhöhen: ', error);
      }
    };
 
    getBalkenHeights();
  }, []);




ich habe mit meinen console.log() Funktionen schon herausgefunden, dass if schleife erkannt wird also bei einem datumswechsel wird anders ausgegeben und sonst gleich. Wieso werden die Daten für die Balken aber beim erneuten start nicht ausgelesen obwohl gleich ausgegeben wird. Davor hatte ich die Funktion so und es hat funktioniert...





Javascript: 
    // Hier rufen Sie die gespeicherten Balkenhöhen aus AsyncStorage beim Komponentenstart ab
    useEffect(() => {
      const getBalkenHeights = async () => {
        
        try {
          
          const sodiumHeightString = await AsyncStorage.getItem('sodiumHeight');
          // Überprüfen, ob die Balkenhöhe bereits in AsyncStorage gespeichert ist
          if (sodiumHeightString !== null) {
            setSodiumHeight(parseFloat(sodiumHeightString));
          } else {
            // Wenn nicht, setzen Sie den Startwert auf 0
            setSodiumHeight(0);
          }
 
          // Wiederholen Sie diesen Vorgang für alle Balkenhöhen
          const magnesiumHeightString = await AsyncStorage.getItem('magnesiumHeight');
          if (magnesiumHeightString !== null) {
            setMagnesiumHeight(parseFloat(magnesiumHeightString));
          } else {
            setMagnesiumHeight(0);
          }
 
          const calciumHeightString = await AsyncStorage.getItem('calciumHeight');
          if (calciumHeightString !== null) {
            setCalciumHeight(parseFloat(calciumHeightString));
          } else {
            setCalciumHeight(0);
          }
 
          const potassiumHeightString = await AsyncStorage.getItem('potassiumHeight');
          if (potassiumHeightString !== null) {
            setPotassiumHeight(parseFloat(potassiumHeightString));
          } else {
            setPotassiumHeight(0);
          }
 
          const lithiumHeightString = await AsyncStorage.getItem('lithiumHeight');
          if (lithiumHeightString !== null) {
            setLithiumHeight(parseFloat(lithiumHeightString));
          } else {
            setLithiumHeight(0);
          }
 
          const boronHeightString = await AsyncStorage.getItem('boronHeight');
          if (boronHeightString !== null) {
            setBoronHeight(parseFloat(boronHeightString));
          } else {
            setBoronHeight(0);
          }
 
          const carbohydrateHeightString = await AsyncStorage.getItem('carbohydrateHeight');
          if (carbohydrateHeightString !== null) {
            setCarbohydrateHeight(parseFloat(carbohydrateHeightString));
          } else {
            setCarbohydrateHeight(0);
          }
 
          const proteinHeightString = await AsyncStorage.getItem('proteinHeight');
          if (proteinHeightString !== null) {
            setProteinHeight(parseFloat(proteinHeightString));
          } else {
            setProteinHeight(0);
          }
 
          const sugarHeightString = await AsyncStorage.getItem('sugarHeight');
          if (sugarHeightString !== null) {
            setSugarHeight(parseFloat(sugarHeightString));
          } else {
            setSugarHeight(0);
          }
 
          const caffeineHeightString = await AsyncStorage.getItem('caffeineHeight');
          if (caffeineHeightString !== null) {
            setCaffeineHeight(parseFloat(caffeineHeightString));
          } else {
            setCaffeineHeight(0);
          }
          const fatHeightString = await AsyncStorage.getItem('fatHeight');
          if (fatHeightString !== null) {
            setFatHeight(parseFloat(fatHeightString));
          } else {
            setFatHeight(0);
          }
        } catch (error) {
          console.error('Fehler beim Abrufen der Balkenhöhen: ', error);
        }
      };
 
 
      getBalkenHeights();
    }, []);

hier nochmal die ganze Klasse:
Javascript: 
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView, Image, Button, TouchableOpacity} from 'react-native';
import { data } from './Data';
import { useNavigation, useRoute } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { FontAwesome5 } from '@expo/vector-icons';
import { Alert } from 'react-native';

const compareDates2 = async () => {
  try {
    // Aktuelles Datum abrufen
    const currentDate = new Date().toDateString();

    // Gespeichertes Datum aus dem AsyncStorage abrufen
    const storedDate = await AsyncStorage.getItem('storedDate');

    if (storedDate === null) {
      // Wenn kein gespeichertes Datum vorhanden ist, speichern wir das aktuelle Datum
      await AsyncStorage.setItem('storedDate', currentDate);
      
      return false; // Es handelt sich um die erste App-Öffnung
    } else if (storedDate === currentDate) {
    
      // Das gespeicherte Datum stimmt mit dem aktuellen Datum überein
      return true;
    } else {
      // Das gespeicherte Datum ist unterschiedlich vom aktuellen Datum
      // Aktuelles Datum speichern und false zurückgeben
      await AsyncStorage.setItem('storedDate', currentDate);
    
      return false;
    }
  } catch (error) {
    console.error('Fehler beim Vergleichen der Daten:', error);
    return false;
  }
};

const compareDates = async () => {
  try {
    const storedDate = await AsyncStorage.getItem('lastOpenDate');
    const currentDate = new Date().toDateString();

    if (storedDate === currentDate) {
      

      return true; // Die Daten sind gleich
    } else {


      // Das Datum ist unterschiedlich, also setzen Sie das "lastOpenDate" neu
      await AsyncStorage.setItem('lastOpenDate', currentDate);
      console.log('Datum erfolgreich aktualisiert');

      return false; // Die Daten sind unterschiedlich
    }
  } catch (error) {
    console.error('Fehler beim Vergleichen der Daten: ', error);
    return false; // Bei einem Fehler wird ebenfalls angenommen, dass die Daten unterschiedlich sind
  }
};


const findDrinkByName = (name) => {
  return data.find(drink => drink.Name === name);
};

const StatisticScreen = () => {

  
 

  const resetBalken = () => {
    setSodiumHeight(0);
    setMagnesiumHeight(0);
    setCalciumHeight(0);
    setPotassiumHeight(0);
    setLithiumHeight(0);
    setBoronHeight(0);
    setCarbohydrateHeight(0);
    setProteinHeight(0);
    setSugarHeight(0);
    setCaffeineHeight(0);
    setFatHeight(0);
 
  };

 
  const handleBarClick = (barName, barHeight) => {
    const maxValues = {
      Natrium: 1500,
      Magnesium: 1800,
      Calcium: 1200,
      Kalium: 1750,
      Lithium: 1000,
      Bor: 1600,
      Kohlenhydrate: 250,
      Protein: 75,
      Suggar: 50,
      Coffein: 400,
      Fat: 200
    };
 
    const messages = {
      Natrium: `Sie haben die tägliche Höchstdosis von ${maxValues.Natrium} mg für Natrium überschritten!`,
      Magnesium: `Sie haben die tägliche Höchstdosis von ${maxValues.Magnesium} mg für Magnesium überschritten!`,
      Calcium: `Sie haben die tägliche Höchstdosis von ${maxValues.Calcium} mg für Calcium überschritten!`,
      Kalium: `Sie haben die tägliche Höchstdosis von ${maxValues.Kalium} mg für Kalium überschritten!`,
      Lithium: `Sie haben die tägliche Höchstdosis von ${maxValues.Lithium} μg für Lithium überschritten!`,
      Bor: `Sie haben die tägliche Höchstdosis von ${maxValues.Bor} μg für Bor überschritten!`,
      Kohlenhydrate: `Sie haben die tägliche Höchstdosis von ${maxValues.Kohlenhydrate} g für Kohlenhydrate überschritten!`,
      Proteine: `Sie haben die tägliche Höchstdosis von ${maxValues.Protein} g für Proteine überschritten!`,
      Suggar: `Sie haben die tägliche Höchstdosis von ${maxValues.Suggar} g für Zucker überschritten!`,
      Koffein: `Sie haben die tägliche Höchstdosis von ${maxValues.Coffein} mg für Koffein überschritten!`,
      Fat: `Sie haben die tägliche Höchstdosis von ${maxValues.Fat} g für Fett überschritten!`,
    };
 
    if (barHeight >= 150) {
      Alert.alert('Hinweis', messages[barName], [{ text: 'OK', onPress: () => {} }]);
    }
  };

  const route = useRoute(); // Verwenden Sie die useRoute-Hook, um auf die Route-Parameter zuzugreifen
  const { selectedQuantity, drinkName } = route.params || {
    selectedQuantity: 0,
    drinkName: "Trendic Medium" // Hier wird nur der Name direkt gesetzt
  };

  // State-Variablen zur Verwaltung der Balkenhöhen
  const [sodiumHeight, setSodiumHeight] = useState(null); // Startwert ist null, bis aus AsyncStorage geladen wird
  const [magnesiumHeight, setMagnesiumHeight] = useState(null);
  const [calciumHeight, setCalciumHeight] = useState(null);
  const [potassiumHeight, setPotassiumHeight] = useState(null);
  const [lithiumHeight, setLithiumHeight] = useState(null);
  const [boronHeight, setBoronHeight] = useState(null);
  const [carbohydrateHeight, setCarbohydrateHeight] = useState(null);
  const [proteinHeight, setProteinHeight] = useState(null);
  const [sugarHeight, setSugarHeight] = useState(null);
  const [caffeineHeight, setCaffeineHeight] = useState(null);
  const [fatHeight, setFatHeight] = useState(null);

  const selectedDrink = findDrinkByName(drinkName);

  const sodium = selectedDrink.Na;
  const magnesium = selectedDrink.Mg;
  const calcium = selectedDrink.Ca;
  const potassium = selectedDrink.K;
  const lithium = selectedDrink.Li;
  const boron = selectedDrink.B;
  const carbohydrate = selectedDrink.Carbohydrate;
  const protein = selectedDrink.Protein;
  const caffeine = selectedDrink.Caffeine;
  const sugar = selectedDrink.Suggar;
  const fat = selectedDrink.Fat;

  useEffect(() => {
    // Funktion zum Berechnen der Balkenhöhe
    const calculateBarHeight = (currentValue, maxValue) => {
      const maxHeight = 150; // Maximale Höhe des Balkens
      // Berechnen Sie die Balkenhöhe proportional zum Verhältnis von currentValue zu maxValue,
      // begrenzt auf die maximale Höhe von 150
      const height = Math.min((currentValue / maxValue) * maxHeight, maxHeight);
      // Stellen Sie sicher, dass die Höhe nicht mehr als die maximale Höhe beträgt
      return Math.min(height, maxHeight);
    };
 
    // Balkenhöhen für verschiedene Spurenelemente berechnen und aktualisieren
    setSodiumHeight(prevHeight => prevHeight + calculateBarHeight(sodium * selectedQuantity * 10, 1500));
    setMagnesiumHeight(prevHeight => prevHeight + calculateBarHeight(magnesium * selectedQuantity * 10, 1800));
    setCalciumHeight(prevHeight => prevHeight + calculateBarHeight(calcium * selectedQuantity * 10, 1200));
    setPotassiumHeight(prevHeight => prevHeight + calculateBarHeight(potassium * selectedQuantity * 10, 1750));
    setLithiumHeight(prevHeight => prevHeight + calculateBarHeight(lithium * selectedQuantity * 10, 1000));
    setBoronHeight(prevHeight => prevHeight + calculateBarHeight(boron * selectedQuantity * 10, 1600));
    setCarbohydrateHeight(prevHeight => prevHeight + calculateBarHeight(carbohydrate * selectedQuantity * 10, 250));
    setProteinHeight(prevHeight => prevHeight + calculateBarHeight(protein * selectedQuantity * 10, 75));
    setSugarHeight(prevHeight => prevHeight + calculateBarHeight(sugar * selectedQuantity * 10, 50));
    setCaffeineHeight(prevHeight => prevHeight + calculateBarHeight(caffeine * selectedQuantity * 10, 400));
    setFatHeight(prevHeight => prevHeight + calculateBarHeight(fat * selectedQuantity * 10, 400));

    
    

  }, [selectedQuantity, drinkName,]);

  useEffect(() => {

    // Speichern Sie die Balkenhöhen in AsyncStorage
    const saveBalkenHeights = async () => {
      try {
        if (sodiumHeight !== null) {
        await AsyncStorage.setItem('sodiumHeight', sodiumHeight.toString());
        }
        if (magnesiumHeight !== null) {
        await AsyncStorage.setItem('magnesiumHeight', magnesiumHeight.toString());
        }
        if (calciumHeight !== null) {
        await AsyncStorage.setItem('calciumHeight', calciumHeight.toString());
        }
        if (potassiumHeight !== null) {
        await AsyncStorage.setItem('potassiumHeight', potassiumHeight.toString());
        }
        if (lithiumHeight !== null) {
        await AsyncStorage.setItem('lithiumHeight', lithiumHeight.toString());
        }
        if (boronHeight !== null) {
        await AsyncStorage.setItem('boronHeight', boronHeight.toString());
        }
        if (carbohydrateHeight !== null) {
        await AsyncStorage.setItem('carbohydrateHeight', carbohydrateHeight.toString());
        }
        if (proteinHeight !== null) {
        await AsyncStorage.setItem('proteinHeight', proteinHeight.toString());
        }
        if (sugarHeight !== null) {
        await AsyncStorage.setItem('sugarHeight', sugarHeight.toString());
        }
        if (caffeineHeight !== null) {
        await AsyncStorage.setItem('caffeineHeight', caffeineHeight.toString());
        }
        if (fatHeight !== null) {
          await AsyncStorage.setItem('fatHeight', fatHeight.toString());
          }
        
      } catch (error) {
        console.error('Fehler beim Speichern der Balkenhöhen: ', error);
      }
    };

    saveBalkenHeights();
  }, [sodiumHeight, magnesiumHeight, calciumHeight, potassiumHeight, lithiumHeight, boronHeight, carbohydrateHeight, proteinHeight, sugarHeight, caffeineHeight, fatHeight]);

    // Hier rufen Sie die gespeicherten Balkenhöhen aus AsyncStorage beim Komponentenstart ab
    useEffect(() => {
      const getBalkenHeights = async () => {
    try {
      const currentDate = new Date().toDateString();
      const storedDate = await AsyncStorage.getItem('storedDate');

      if (storedDate === null || storedDate !== currentDate) {
        await AsyncStorage.setItem('storedDate', currentDate);
        console.log('anders');
      } else {

          const sodiumHeightString = await AsyncStorage.getItem('sodiumHeight');
          // Überprüfen, ob die Balkenhöhe bereits in AsyncStorage gespeichert ist
          if (sodiumHeightString !== null) {
            
            setSodiumHeight(parseFloat(sodiumHeightString));
          } else {
            // Wenn nicht, setzen Sie den Startwert auf 0
            setSodiumHeight(0);
          }
 
          // Wiederholen Sie diesen Vorgang für alle Balkenhöhen
          const magnesiumHeightString = await AsyncStorage.getItem('magnesiumHeight');
          if (magnesiumHeightString !== null) {
            setMagnesiumHeight(parseFloat(magnesiumHeightString));
          } else {
            setMagnesiumHeight(0);
          }
 
          const calciumHeightString = await AsyncStorage.getItem('calciumHeight');
          if (calciumHeightString !== null) {
            setCalciumHeight(parseFloat(calciumHeightString));
          } else {
            setCalciumHeight(0);
          }
 
          const potassiumHeightString = await AsyncStorage.getItem('potassiumHeight');
          if (potassiumHeightString !== null) {
            setPotassiumHeight(parseFloat(potassiumHeightString));
          } else {
            setPotassiumHeight(0);
          }
 
          const lithiumHeightString = await AsyncStorage.getItem('lithiumHeight');
          if (lithiumHeightString !== null) {
            setLithiumHeight(parseFloat(lithiumHeightString));
          } else {
            setLithiumHeight(0);
          }
 
          const boronHeightString = await AsyncStorage.getItem('boronHeight');
          if (boronHeightString !== null) {
            setBoronHeight(parseFloat(boronHeightString));
          } else {
            setBoronHeight(0);
          }
 
          const carbohydrateHeightString = await AsyncStorage.getItem('carbohydrateHeight');
          if (carbohydrateHeightString !== null) {
            setCarbohydrateHeight(parseFloat(carbohydrateHeightString));
          } else {
            setCarbohydrateHeight(0);
          }
 
          const proteinHeightString = await AsyncStorage.getItem('proteinHeight');
          if (proteinHeightString !== null) {
            setProteinHeight(parseFloat(proteinHeightString));
          } else {
            setProteinHeight(0);
          }
 
          const sugarHeightString = await AsyncStorage.getItem('sugarHeight');
          if (sugarHeightString !== null) {
            setSugarHeight(parseFloat(sugarHeightString));
          } else {
            setSugarHeight(0);
          }
 
          const caffeineHeightString = await AsyncStorage.getItem('caffeineHeight');
          if (caffeineHeightString !== null) {
            setCaffeineHeight(parseFloat(caffeineHeightString));
          } else {
            setCaffeineHeight(0);
          }
          const fatHeightString = await AsyncStorage.getItem('fatHeight');
          if (fatHeightString !== null) {
            setFatHeight(parseFloat(fatHeightString));
          } else {
            setFatHeight(0);
          }
          console.log('gleich');
        
        }
      } catch (error) {
        console.error('Fehler beim Abrufen der Balkenhöhen: ', error);
      }
    };
 
    getBalkenHeights();
  }, []);

      // Diese Funktion kann verwendet werden, um den Inhalt von AsyncStorage auszugeben
  const showAsyncStorageData = async () => {
    try {
      const sodiumHeightString = await AsyncStorage.getItem('sodiumHeight');
      console.log('sodiumHeight:', sodiumHeightString);

      // Fügen Sie hier ähnlichen Code für andere Balkenhöhen hinzu

      // ... (Weitere Balkenhöhen)
    } catch (error) {
      console.error('Fehler beim Abrufen der Balkenhöhen: ', error);
    }
  };







  // Funktion, um die Spurenelemente-Benachrichtigung anzuzeigen
const showSpurenelementeAlert = () => {
  Alert.alert(
    'Spurenelemente',
    'Für viele Funktionen des menschlichen Körpers ist es wichtig genug Spurenelemente zu sich zu nehmen. Für weitere Informationen zu den einzelnen Spurenelementen und deren Auswirkungen auf den Körper können sie im Informationsabschnitt genaueres nachlesen',
    [
      {
        text: 'Schließen',
        style: 'cancel',
      },
    ],
    { cancelable: true }
  );
};

// Funktion, um die Nährstoffe-Benachrichtigung anzuzeigen
const showNährstoffeAlert = () => {
  Alert.alert(
    'Nährstoffe',
    'Es ist wichtig darauf zu achten genug von allen Nährstoffen zu sich zu nehmen, dabei ist es genau so wichitg darauf zu achten was man trinkt als was man isst. Allerdings sollte man auch darauf achten nicht zu viel von bestimmten Nährstoffen zu sich zu nehmen. Gerade in Softdrinks, wie Cola ist sehr viel Zucker und Koffein',
    [
      {
        text: 'Schließen',
        style: 'cancel',
      },
    ],
    { cancelable: true }
  );
};

  return (
    <ScrollView style={styles.scrollView}>
      
      <Text style={{ position: 'absolute', top: 100, left: 75, fontWeight: 'bold', color: '#105474', fontSize: 30 }} onPress={showAsyncStorageData}>Statistiken</Text>
      <Text style={{ position: 'absolute', top: 210, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 23 }} onPress={resetBalken}>Spurenelemente </Text>
      <TouchableOpacity
      style={{ position: 'absolute', top: 214, left: 210 }}
      onPress={showSpurenelementeAlert}// Adjust the position as needed
    >
      <FontAwesome5 name="info-circle" size={20} color="#105474" />
    </TouchableOpacity>
      <Text style={{ position: 'absolute', top: 495, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 23 }}>Nährstoffe</Text>
      <TouchableOpacity
      style={{ position: 'absolute', top: 498, left: 150, zIndex: 999 }}
      onPress={showNährstoffeAlert}// Adjust the position as needed
    >
      <FontAwesome5 name="info-circle" size={20} color="#105474" />
    </TouchableOpacity>
      <Text style={{ position: 'absolute', top: 780, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 23 }}>Abkürzungen</Text>
      <Text style={{ position: 'absolute', top: 420, left: 41, fontWeight: 'bold', color: '#105474', fontSize: 14 }} >Na</Text>
      <Text style={{ position: 'absolute', top: 420, left: 97, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Mg</Text>
      <Text style={{ position: 'absolute', top: 420, left: 156, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Ca</Text>
      <Text style={{ position: 'absolute', top: 420, left: 219, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>K</Text>
      <Text style={{ position: 'absolute', top: 420, left: 276, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Li</Text>
      <Text style={{ position: 'absolute', top: 420, left: 335, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>B</Text>
      <Text style={{ position: 'absolute', top: 705, left: 30, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>KH/Zucker</Text>
      <Text style={{ position: 'absolute', top: 705, left: 133, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Fett</Text>
      <Text style={{ position: 'absolute', top: 705, left: 217, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Proteine</Text>
      <Text style={{ position: 'absolute', top: 705, left: 315, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Koffein</Text>
      <Text style={{ position: 'absolute', top: 820, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>KH = Kohlenhydrate</Text>
      <Text style={{ position: 'absolute', top: 840, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Na = Natrium</Text>
      <Text style={{ position: 'absolute', top: 860, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Mg = Magnesium</Text>
      <Text style={{ position: 'absolute', top: 880, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Ca = Calcium</Text>
      <Text style={{ position: 'absolute', top: 900, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>K = Kalium</Text>
      <Text style={{ position: 'absolute', top: 920, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>Li = Lithium</Text>
      <Text style={{ position: 'absolute', top: 940, left: 26, fontWeight: 'bold', color: '#105474', fontSize: 14 }}>B = Bor</Text>
      <FontAwesome5 name="chart-bar" style={{ position: 'absolute', top: 106, left: 39 }} size={27} color="#105474" />

      <View style={[styles.Na, { height: sodiumHeight, maxHeight: 150, backgroundColor: sodiumHeight >= 150 ? 'darkred' : '#105474' }]} onTouchEnd={() => handleBarClick('Natrium', sodiumHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Mg, { height: magnesiumHeight, maxHeight: 150, backgroundColor: magnesiumHeight >= 150 ? 'darkred' : '#105474' }]} onTouchEnd={() => handleBarClick('Magnesium', magnesiumHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Ca, { height: calciumHeight, maxHeight: 150, backgroundColor: calciumHeight >= 150 ? 'darkred' : '#105474' }]}  onTouchEnd={() => handleBarClick('Calcium', calciumHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Ka, { height: potassiumHeight, maxHeight: 150, backgroundColor: potassiumHeight >= 150 ? 'darkred' : '#105474' }]}onTouchEnd={() => handleBarClick('Kalium', potassiumHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Li, { height: lithiumHeight, maxHeight: 150, backgroundColor: lithiumHeight >= 150 ? 'darkred' : '#105474' }]} onTouchEnd={() => handleBarClick('Lithium', lithiumHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Bo, { height: boronHeight, maxHeight: 150, backgroundColor: boronHeight >= 150 ? 'darkred' : '#105474' }]} onTouchEnd={() => handleBarClick('Bor', boronHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Carbohydrates, { height: carbohydrateHeight, maxHeight: 150, backgroundColor: carbohydrateHeight >= 150 ? 'darkred' : '#105474' }]}onTouchEnd={() => handleBarClick('Kohlenhydrate', carbohydrateHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Protein, { height: proteinHeight, maxHeight: 150, backgroundColor: proteinHeight >= 150 ? 'darkred' : '#105474' }]}onTouchEnd={() => handleBarClick('Protein', proteinHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Suggar, { height: sugarHeight, maxHeight: 150, backgroundColor: sugarHeight >= 150 ? 'darkred' : '#105474' }]}onTouchEnd={() => handleBarClick('Suggar', sugarHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Coffein, { height: caffeineHeight, maxHeight: 150, backgroundColor: caffeineHeight >= 150 ? 'darkred' : '#105474' }]}onTouchEnd={() => handleBarClick('Caffeine', caffeineHeight)}>
  <View style={styles.bar}></View>
</View>
<View style={[styles.Fat, { height: fatHeight, maxHeight: 150, backgroundColor: fatHeight >= 150 ? 'darkred' : '#105474' }]}onTouchEnd={() => handleBarClick('Fat', fatHeight)}>
  <View style={styles.bar}></View>
</View>
      
      

      <View style={styles.lineContainer}>
        <View style={styles.line0}></View>
      </View>
        <View style={styles.lineContainer}>
        <View style={styles.line}></View>
      </View>
      <View style={styles.lineContainer}>
        <View style={styles.line}></View>
      </View>
      <View style={styles.lineContainer}>
        <View style={styles.line}></View>
      </View>
      <View style={styles.lineContainer}>
        <View style={styles.line}></View>
      </View>
      <View style={styles.lineContainer}>
        <View style={styles.line}></View>
      </View>
      <View style={styles.lineContainer2}>
        <View style={styles.line2}></View>
      </View>
      <View style={styles.lineContainer2}>
        <View style={styles.line2}></View>
      </View>
      <View style={styles.lineContainer2}>
        <View style={styles.line2}></View>
      </View>
      <View style={styles.lineContainer2}>
        <View style={styles.line2}></View>
      </View>
      <View style={styles.lineContainer2}>
        <View style={styles.line2}></View>
      </View>
      

      <View style={styles.container}>
        <View style={styles.tracebars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.tracebars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.tracebars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.tracebars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.tracebars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.tracebars}>
          <View style={styles.bar}></View>
        </View>
      </View>
      <View style={[styles.container, { marginTop: 80 }]}>
        <View style={styles.ingreadientsbars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.ingreadientsbars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.ingreadientsbars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.ingreadientsbars}>
          <View style={styles.bar}></View>
        </View>
        <View style={styles.barSuggar}></View>
      </View>
      
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    maxHeight: 800, // Hier können Sie die maximale Höhe einstellen, die Sie möchten
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    paddingHorizontal: 20,
    marginBottom: 10,
    
  },

  barSuggar:{
    position: 'absolute',
    width: 8,
    height: 150,
    backgroundColor: 'lightgrey', // Farbe nach Wunsch anpassen
    margin: 25,
    top: -175,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    left: 47

  },
 
  tracebars: {
    width: 8,
    height: 150,
    backgroundColor: 'lightgrey', // Farbe nach Wunsch anpassen
    margin: 25,
    top: -170,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
  },
  ingreadientsbars:{
    width: 8,
    height: 150,
    backgroundColor: 'lightgrey', // Farbe nach Wunsch anpassen
    margin: 45,
    top: -195,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
  },
  badbars:{
    width: 8,
    height: 150,
    backgroundColor: 'lightgrey', // Farbe nach Wunsch anpassen
    margin: 85,
    top: -485,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    
  },
  lineContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
  },
  line: {
    borderBottomWidth: 1, // Dicke der Linie
    borderBottomColor: 'lightgrey', // Farbe der Linie
    width: '86%',
    left: 28,
    top: 200,
    padding: 8

  },
  lineContainer2: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
  },
  line2: {
    borderBottomWidth: 1, // Dicke der Linie
    borderBottomColor: 'lightgrey', // Farbe der Linie
    width: '86%',
    left: 28,
    top: 300,
    padding: 8

  },
  lineContainer3: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
  },
  line3: {
    borderBottomWidth: 1, // Dicke der Linie
    borderBottomColor: 'lightgrey', // Farbe der Linie
    width: '86%',
    left: 28,
    top: 400,
    padding: 8
  },
  line0: {
    borderBottomWidth: 1, // Dicke der Linie
    borderBottomColor: '#105474', // Farbe der Linie
    width: '80%',
    left: 38,
    top: 120,
    padding: 8
  },
  Na:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 510,
    left: 21,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Mg:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 510,
    left: 79,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Ca:{
    position: 'absolute',
    width: 8,
    margin: 25,
    bottom: 510,
    left: 137,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Ka:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 510,
    left: 195,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Li:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 510,
    left: 253,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
   Bo:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 510,
    left: 311,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Carbohydrates:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 225,
    left: 19,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Fat:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 225,
    left: 117,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Protein:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 225,
    left: 215,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Suggar:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 225,
    left: 47,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
  Coffein:{
    position: 'absolute',
    width: 8,
    backgroundColor: '#105474', // Farbe nach Wunsch anpassen
    margin: 25,
    bottom: 225,
    left: 313,
    borderTopLeftRadius: 3, // Runde die obere linke Ecke
    borderTopRightRadius: 3, // Runde die obere rechte Ecke
    zIndex: 5
  },
 

});

export default StatisticScreen;
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

P
Frage zu UseEffect in React Native
Antworten
1
Aufrufe
625
SheepShaver
SheepShaver
P
Übergabe von Daten in React Native (JavaScript)
Antworten
2
Aufrufe
666
PeterBaumler
P
P
Navigation in JavaScript (React Native)
Antworten
9
Aufrufe
614
PeterBaumler
P
P
Navigation in React native
Antworten
5
Aufrufe
589
PeterBaumler
P
Z
PhpStorm und React Native?
Antworten
4
Aufrufe
1.144
zlep
Z
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz