0
454
VistasLa animación nativa de React no funciona según lo previsto
Tengo un problema y quisiera ayuda. Quiero crear un botón con flecha derecha que se mueva. Pero desafortunadamente, la flecha comienza a moverse desde el comienzo del botón. Solo quiero mover esa flecha en el lado derecho. Así que por ahora parece que
¡Creo que está sucediendo porque la animación se ve afectada por el contenedor del botón!
Así que mi código hasta ahora -
<TouchableOpacity style={{ position: "absolute", bottom: 40, paddingVertical: 10, paddingHorizontal: 15, justifyContent: "center", width: "40%", borderRadius: 20, flexDirection: "row", backgroundColor: "#a12f2f", alignItems: "center", textAlign: "center" }} activeOpacity={0.9} onPress={() => onPressNext(count)} > <Text style={{ fontSize: 16,color: "white", marginRight: 10,}}> {count === 0 ? "Explain steps" : "Next step"} </Text> {count === 0 && ( <Animatable.View animation={"slideInLeft"} iterationCount={"infinite"} > <VectorIconComponent size={20} name={"arrowright"} color={"white"} type={ICON_TYPES.AntDesign} /> </Animatable.View> )} </TouchableOpacity>También usé react-native-animatable para crear esa animación. Entonces mi pregunta es ¿cómo puedo hacer esta animación sin cruzar el texto?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Prueba esto !
import React, { useEffect } from 'react' import { Animated, SafeAreaView, View, Text, TouchableOpacity, Image, Easing } from 'react-native' export default function App() { const animatedValue = new Animated.Value(0) useEffect(() => { _start() }, [animatedValue]) function _start() { const toValue = 35 Animated.loop( Animated.timing(animatedValue, { toValue, duration: 1000, useNativeDriver: true }) ).start() } function handlePress() { alert('ok') } return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ flex: 1 }}> <TouchableOpacity activeOpacity={0.75} style={{ position: 'absolute', bottom: 20, height: 60, width: 200, backgroundColor: 'tan', alignSelf: 'center', borderRadius: 20, flexDirection: 'row' }} onPress={handlePress}> <View style={{ height: 60, width: 140, alignItems: 'center', justifyContent: 'center', }}> <Text> Explain Steps </Text> </View> <View style={{ height: 60, width: 60, justifyContent: 'center', }}> <Animated.View style={{ height: 30, width: 30, transform: [{ translateX: animatedValue }] }}> <Image source={{ uri: 'https://cdn.iconscout.com/icon/free/png-256/right-arrow-1438234-1216195.png' }} style={{ height: '100%', width: '100%' }} /> </Animated.View> </View> </TouchableOpacity> </View> </SafeAreaView> ) }Producción
·
Juan Pablo Isaza
Denunciar
Responde la pregunta