Quiero animar mi Animated.View usando el evento de clic de un diseño dinámico. Estoy creando los refs como este
en constructor
this.HeadingAnimationRefs = []
entonces en mi componente
<Animated.View ref={ref => this.HeadingAnimationRefs[index] = ref}> <Text style={styles.boldHeading}>Hello</Text> </Animated.View>y en mi método onPress
onPress={() => console.log('Hi ', this.HeadingAnimationRefs[index].current)}o
onPress={() => console.log('Hi ', this.HeadingAnimationRefs[index].props)}Dígame la forma correcta de resaltar/animar una vista. Intenté usar TouchableOpacity pero no está animado cuando se hace clic en él mediante programación, así que decidí envolverlo en Animated.View pero ahora no puedo animar Animated.View.
Gracias
Pude animar la vista sin usar las referencias de esta manera.
En el estado, usé una matriz para almacenar el valor de referencia de anim para mis componentes, luego, en el método onPress, llamé a la función de animación con referencia al índice de mi componente respectivo.
método de animación
animateView = (index) => { Animated.timing(this.state.questionLocations[questionIndex].anim, { toValue: 0, duration: 1000, useNativeDriver: true, }).start( () => { Animated.timing(this.state.questionLocations[questionIndex].anim, { toValue: 1, duration: 1000, useNativeDriver: true, }).start() } ); }y en Prensa
onPress={() => this.animateView(index)}y finalmente establezca la opacidad de Animated.View así
<Animated.View style={{ opacity: this.state.questionLocations[questionIndex]?.anim }}> <Text style={styles.boldHeading}>Hello</Text> </Animated.View>