Thema

Um ein Modal mit einer Slide-In-Animation mit React Native Reanimated und einem Federmasseneffekt zu erstellen, müssen Sie die folgenden Schritte ausführen. In diesem Beispiel wird davon ausgegangen, dass Sie React Native Reanimated 2.x verwenden.

1. Abhängigkeiten installieren: Stellen Sie sicher, dass Sie die erforderlichen Abhängigkeiten installiert haben. Führen Sie den folgenden Befehl aus, um react-native-reanimated zu installieren, falls Sie dies noch nicht getan haben:

   npm install react-native-reanimated

2. Reanimated einrichten: Stellen Sie sicher, dass Sie alle plattformspezifischen Installationsschritte ausführen, die in Reanimated documentation erwähnt werden.

3. Implementieren Sie das Modal: Im Folgenden finden Sie einen vollständigen Beispielcode zum Erstellen eines Modals, das mithilfe der Frühlingsanimation von unten hineingeschoben wird.

import React, { useState } from 'react';
import { View, Text, Button, Modal, StyleSheet, TouchableOpacity } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const translateY = useSharedValue(1000); // Offscreen position

  const showModal = () => {
    setIsVisible(true);
    translateY.value = withSpring(0, { mass: 0.5, tension: 100, friction: 10 }); // Spring animation
  };

  const hideModal = () => {
    translateY.value = withSpring(1000, { mass: 0.5, tension: 100, friction: 10 }, () => {
      setIsVisible(false);
    });
  };

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

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={showModal} />

      <Modal
        transparent
        visible={isVisible}
        animationType="none" // Disable default animation
        onRequestClose={hideModal} // Handle back button on Android
      >
        <TouchableOpacity style={styles.overlay} onPress={hideModal}>
          <Animated.View style={[styles.modalContainer, animatedStyle]}>
            <Text style={styles.modalText}>This is a modal!</Text>
            <Button title="Close" onPress={hideModal} />
          </Animated.View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContainer: {
    backgroundColor: 'white',
    padding: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  modalText: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default App;

Erklärung:

• Zustandsverwaltung: Wir verwalten die Sichtbarkeit des Modals mit einer Zustandsvariablen (isVisible).
• Animierte Werte: Wir verwenden useSharedValue, um den vertikalen Translationswert (translateY) zu speichern.
• Animationsauslöser: Die Funktion showModal legt die Übersetzung so fest, dass sie in der Ansicht animiert wird, während hideModal sie animiert und dann das Modal ausblendet.
• Animierter Stil: Wir erstellen einen animierten Stil, der basierend auf dem Wert translateY aktualisiert wird.
• Modales Overlay: Das Modal kann durch Tippen außerhalb des Modals (des Overlays) geschlossen werden.

Denken Sie daran:

• Führen Sie Ihr Projekt immer auf einem echten Gerät oder einem Emulator aus, der die React Native Reanimation-Funktionen unterstützt.
• Passen Sie die Stile und Übergangseinstellungen an Ihre Designanforderungen an.