Entwickeln Sie eine achtsame Atemübungs-App mit React Native

Erstellen Sie eine sanfte, beruhigende Atemübungs-App mit React Native und Reanimated. Dieses Schritt-für-Schritt-Tutorial behandelt wichtige Animations-Hooks, Sequenzierung und UI-Synchronisierung für eine leistungsstarke, native Erfahrung in Ihren mobilen Wellness-Anwendungen.

WellAlly-Redaktionsteam

Autorenprofil ansehen

12. Dezember 20258 Min. Lesezeit

Auf dieser Seite

In einer Welt voller ständiger Benachrichtigungen und Ablenkungen kann ein Moment der Konzentration auf unseren Atem ein kraftvolles Werkzeug zur Erdung sein. Es hat sich gezeigt, dass achtsame Atemübungen Stress reduzieren und die Konzentration verbessern können, was sie zu einer beliebten Funktion in Wellness- und Mental-Health-Apps macht.

Dieses Tutorial führt Sie durch den Aufbau einer einfachen, aber eleganten App für achtsame Atemübungen unter Verwendung von React Native und der leistungsstarken Bibliothek react-native-reanimated. Wir konzentrieren uns auf die Erstellung eines visuell beruhigenden und reaktionsschnellen Benutzererlebnisses mit sanften Animationen, die für eine App dieser Art entscheidend sind. Eine ruckelnde oder nicht reagierende Animation kann den Zweck einer Entspannungs-App zunichte machen, weshalb Reanimated das perfekte Werkzeug für diese Aufgabe ist. Es ermöglicht uns, unsere Animationen auf dem nativen UI-Thread auszuführen und die JavaScript-Brücke zu umgehen, um butterweiche 60-FPS-Animationen zu erreichen.

Am Ende dieses Tutorials haben Sie eine funktionierende Atem-App und ein solides Verständnis dafür, wie Sie Reanimated nutzen können, um hochperformante Animationen in Ihren eigenen React-Native-Projekten zu erstellen.

Voraussetzungen

Praktische Kenntnisse in React Native und JavaScript.
Node.js und npm/yarn auf Ihrem Computer installiert.
Eine React-Native-Entwicklungsumgebung eingerichtet (Expo Go oder React Native CLI).
Vertrautheit mit React Hooks.

Das Problem verstehen

Die zentrale Herausforderung bei der Erstellung einer Atem-App besteht darin, dem Benutzer klares, beruhigendes visuelles Feedback zu geben, das ihn durch den Atemzyklus führt (einatmen, halten, ausatmen). Dies erfordert:

Eine sanfte, kontinuierliche Animation: Ein Kreis, der sich ausdehnt und zusammenzieht, um das Ein- und Ausatmen darzustellen.
Synchronisierte Textanweisungen: Text, der sich zeitlich mit der Animation synchronisiert, um den Benutzer anzuleiten.
Eine ablenkungsfreie Benutzeroberfläche: Ein minimalistisches Design, das den Benutzer auf die Übung konzentriert.

Die eingebaute Animated API von React Native kann ein guter Ausgangspunkt für Animationen sein, aber für gesturebasierte Interaktionen und Animationen, die hochperformant sein müssen, ist react-native-reanimated die überlegene Wahl. Es bietet eine deklarativere API und führt Animationen auf dem UI-Thread aus, wodurch verhindert wird, dass sie durch JavaScript-Thread-Operationen unterbrochen werden.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie ein neues React-Native-Projekt haben. Wir verwenden Expo für dieses Tutorial für einen schnelleren Setup.

bash

npx create-expo-app mindful-breathing-app
cd mindful-breathing-app

Installieren Sie als Nächstes react-native-reanimated:

bash

npx expo install react-native-reanimated

Fügen Sie abschließend das reanimated-Plugin zu Ihrer babel.config.js hinzu:

javascript

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Jetzt sind wir bereit, mit dem Aufbau zu beginnen!

Schritt 1: Aufbau der grundlegenden Benutzeroberfläche

Zunächst erstellen wir die grundlegenden visuellen Elemente: einen Kreis, der sich ausdehnt und zusammenzieht, und ein Textelement für Anweisungen.

Was wir tun

Wir erstellen ein einfaches, zentriertes Layout mit einem Kreis und einer Textkomponente.

Implementierung

javascript

// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.circle}>
        <Text style={styles.text}>Atmen</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Wie es funktioniert

Dies ist eine Standard-React-Native-Komponente, die einen weißen Kreis mit dem Text "Atmen" in der Mitte eines schwarzen Bildschirms rendert. Dies gibt uns die grundlegende Struktur für unsere Animation.

Schritt 2: Erstellen der Atem-Animation

Jetzt kommt der Kern unserer App: die Atem-Animation. Wir verwenden die Hooks von Reanimated, um eine sanfte, sich wiederholende Animation zu erstellen.

Was wir tun

Wir verwenden useSharedValue, um einen animierbaren Wert zu erstellen, der die Skalierung des Kreises steuert. Dann verwenden wir useAnimatedStyle, um diesen animierten Wert auf den Stil des Kreises anzuwenden. Schließlich verwenden wir withRepeat und withSequence, um einen kontinuierlichen Atemzyklus zu erstellen.

Implementierung

javascript

// App.js
import React, { useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.5, { duration: 4000 }),
        withTiming(1, { duration: 4000 })
      ),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.circle, animatedStyle]}>
        <Text style={styles.text}>Atmen</Text>
      </Animated.View>
    </View>
  );
}

// Styles bleiben gleich

Wie es funktioniert

useSharedValue(1): Wir initialisieren einen Shared Value scale mit einem Wert von 1. Shared Values sind animierbar und können sowohl vom UI- als auch vom JavaScript-Thread aus zugegriffen und modifiziert werden.
useEffect: Wir verwenden einen useEffect-Hook, um die Animation zu starten, wenn die Komponente eingebunden wird.
withRepeat(...): Diese Funktion erstellt eine sich wiederholende Animation. Wir setzen das zweite Argument auf -1, um sie unbegrenzt zu wiederholen, und das dritte Argument auf true, um sie bei jeder Wiederholung umzukehren (Boomerang-Effekt).
withSequence(...): Wir definieren die Animationssequenz. Zuerst skaliert der Kreis über 4 Sekunden auf 1,5 hoch (withTiming(1.5, { duration: 4000 })), dann skaliert er über 4 Sekunden wieder auf 1 herunter (withTiming(1, { duration: 4000 })).
useAnimatedStyle(...): Dieser Hook erstellt ein animiertes Stilobjekt. Er nimmt ein Worklet (eine Funktion, die auf dem UI-Thread ausgeführt werden kann), das ein Stilobjekt zurückgibt.
transform: [{ scale: scale.value }]: Wir verknüpfen den scale Shared Value mit der transform-Eigenschaft des Kreises.
Animated.View: Wir wickeln unseren Kreis View in eine Animated.View ein, um ihn animierbar zu machen.

Schritt 3: Synchronisieren der Anweisungstexte

Ein visueller Hinweis ist gut, aber Anweisungstexte machen die Übung viel klarer. Fügen wir Text hinzu, der sich synchron mit unserer Animation ändert.

Was wir tun

Wir erstellen einen neuen Shared Value, um den aktuellen Anweisungstext zu speichern. Dann verwenden wir runOnJS, um diesen Text vom UI-Thread aus zu aktualisieren und ihn mit der Atem-Animation synchron zu halten.

Implementierung

javascript

// App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
  runOnJS,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);
  const [instruction, setInstruction] = useState('Atmen');

  const updateInstruction = (text) => {
    setInstruction(text);
  };

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.5, { duration: 4000 }, () => {
          runOnJS(updateInstruction)('Halten');
        }),
        withTiming(1, { duration: 4000 }, () => {
          runOnJS(updateInstruction)('Atmen');
        })
      ),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.circle, animatedStyle]}>
        <Text style={styles.text}>{instruction}</Text>
      </Animated.View>
    </View>
  );
}
// Styles bleiben gleich

Wie es funktioniert

useState: Wir verwenden eine State-Variable instruction, um den Text zu speichern, der angezeigt wird.
runOnJS: Reanimated-Animationen laufen auf dem UI-Thread, der React-State nicht direkt aktualisieren kann. runOnJS ermöglicht es uns, eine JavaScript-Funktion (in diesem Fall updateInstruction) vom UI-Thread aus aufzurufen.
Animations-Callbacks: withTiming akzeptiert eine optionale Callback-Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist. Wir verwenden dies, um runOnJS(updateInstruction) mit der nächsten Anweisung zum appropriate Zeitpunkt in der Animationssequenz aufzurufen.

Alles zusammenfügen

Hier ist der vollständige Code für unsere App für achtsames Atmen:

javascript

// App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
  runOnJS,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);
  const [instruction, setInstruction] = useState('Einatmen');

  const updateInstruction = (text) => {
    'worklet';
    runOnJS(setInstruction)(text);
  };

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.5, { duration: 4000 }, () => {
          updateInstruction('Halten');
        }),
        withTiming(1.5, { duration: 2000 }, () => {
          updateInstruction('Ausatmen');
        }),
        withTiming(1, { duration: 4000 }, () => {
          updateInstruction('Halten');
        }),
        withTiming(1, { duration: 2000 }, () => {
            updateInstruction('Einatmen');
        })
      ),
      -1,
      false
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <Animated.View style={[styles.circle, animatedStyle]}>
        <Text style={styles.text}>{instruction}</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  circle: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Fazit

Wir haben erfolgreich eine App für achtsame Atemübungen mit einer sanften, beruhigenden Animation unter Verwendung von React Native und Reanimated erstellt. Wir haben gelernt, wie man die Kern-Hooks von Reanimated verwendet, um komplexe, sich wiederholende Animationen zu erstellen, und wie man sie mit State-Updates auf dem JavaScript-Thread synchronisiert.

Dies ist erst der Anfang. Sie können dieses Projekt erweitern, indem Sie:

Dem Benutzer ermöglichen, die Dauer der Atemübung einzustellen.
Soundeffekte oder haptisches Feedback hinzufügen.
Verschiedene Atemmuster erstellen (z.B. Box-Atmung).

Reanimated ist eine unglaublich leistungsstarke Bibliothek, die das Benutzererlebnis Ihrer React-Native-App auf die nächste Stufe heben kann. Ich ermutige Sie, ihre Dokumentation zu erkunden und mit verschiedenen Animationen zu experimentieren.

Ressourcen

React Native Reanimated Dokumentation: https://docs.swmansion.com/react-native-reanimated/
React Native Gesture Handler Dokumentation: https://docs.swmansion.com/react-native-gesture-handler/docs/

Kurze Übersicht

Aspekt	Wichtige Informationen
Thema	Entwicklung
Relevanz	Patientenaufklärung und Bewusstsein
Maßnahme	Besprechen Sie dies mit Ihrem Arzt
Häufigkeit	Wie von Ihrem Behandlungsteam empfohlen
Evidenz	Basierend auf aktuellen klinischen Leitlinien

Häufig gestellte Fragen

F: Woher weiß ich, ob dies auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrem Arzt, um Ihre individuellen Risikofaktoren einzuschätzen und geeignete nächste Schritte zu bestimmen.

F: Was sollte ich meinen Arzt fragen? A: Gute Fragen sind: "Was bedeuten meine Ergebnisse?", "Was sind meine Optionen?", "Welche Lebensstiländerungen würden helfen?" und "Wann sollte ich nachfolgen?"

F: Gibt es Lebensstiländerungen, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), qualitativ hochwertiger Schlaf (7-9 Stunden), Stressbewältigung und Vermeidung von Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient nur zu Informationszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie immer einen qualifizierten Gesundheitsdienstleister, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Pflege treffen. Individuelle Umstände variieren, und was für eine Person angemessen ist, ist möglicherweise nicht für eine andere Person geeignet.

Wenn Sie einen medizinischen Notfall haben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.

Zurück zu allen Artikeln