Voltooid!
Maak modaal met React native gereanimeerde animatiedia met lentemassa
Technologie
Techniek
Natuurkunde
Informatica
Voortgang
Antwoord
Om een modaal te maken met een slide-in-animatie met behulp van React Native Reanimated en een lente-massa-effect, moet je deze stappen volgen. In dit voorbeeld wordt ervan uitgegaan dat je React Native Reanimated 2.x gebruikt.
- Installeer afhankelijkheden:
Zorg ervoor dat je de nodige afhankelijkheden hebt geïnstalleerd. Voer de volgende opdracht uit om
react-native-reanimated
te installeren als u dit nog niet hebt gedaan:
npm install react-native-reanimated
-
Instelling gereanimeerd: Zorg ervoor dat u alle platformspecifieke installatiestappen volgt die worden vermeld in de Reanimated documentation.
-
Implementeer de modal: Hieronder vindt u een volledige voorbeeldcode om een modal te maken die vanaf de onderkant naar binnen schuift met behulp van lenteanimatie.
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;
Uitleg:
- State Management: We beheren de zichtbaarheid van de modal met een state variabele (
isVisible
). - Geanimeerde waarden: We gebruiken
useSharedValue
om de verticale vertaalwaarde (translateY
vast te houden. - Animation Trigger: De functie
showModal
stelt de vertaling in om deze in beeld te animeren, terwijlhideModal
deze animeert en vervolgens de modal verbergt. - Geanimeerde stijl: We maken een geanimeerde stijl die wordt bijgewerkt op basis van de waarde
translateY
. - Modale overlay: De modal kan worden uitgeschakeld door erbuiten te tikken (de overlay).
Onthoud:
- Voer je project altijd uit op een echt apparaat of een emulator die React Native Reanimated-functies ondersteunt.
- Pas de stijlen en overgangsinstellingen aan volgens uw ontwerpbehoeften.
Suggesties
- Wat zijn de belangrijkste afhankelijkheden die nodig zijn voor het maken van de modal met inschuifanimatie?
- Hoe werkt de showModal functie om de modal in beeld te brengen?
- Kunt u uitleggen wat het doel is van de modale overlay en hoe deze in de code is geïmplementeerd?
- Wat zijn de belangrijkste overwegingen bij het uitvoeren van het project met React Native Reanimated-functies?
- Hoe kunnen de stijlen en overgangsinstellingen worden aangepast aan specifieke ontwerpbehoeften?
AAAnonymous