es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React Native Reanimated 2 (Animar SVG en base a cambios en la ruta)

30 Jul, 2023 Programación

Tengo un componente funcional de React llamado “Svg” que se utiliza como un icono para la Bottom-TabBar. En el cambio de ruta, el estado actual “state.index” se compara con el índice de la ruta “index”. El resultado, que es esencialmente un estado booleano “isFocused”, se pasa al Svg.

Estoy tratando de animar el Svg en función de este estado y no puedo completar la operación simple usando reanimated. Estoy bastante seguro de que el valor de “fill” no se está actualizando en el gancho “useAnimatedProps”, pero no tengo la experiencia de tener un conocimiento profundo con reanimated. Cualquier ayuda será muy apreciada.

import Animated, {
  useAnimatedProps,
  useSharedValue,
} from 'react-native-reanimated';
import Svg, { Circle, Path } from 'react-native-svg';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);

export default ({ isFocused }) => {
  const fill = useSharedValue({ fill: 'transparent' });
  const animatedProps = useAnimatedProps(() => {
    isFocused
      ? (fill.value = { fill: 'red' })
      : (fill.value = { fill: 'transparent' });

    return fill.value;
  });

  return (
    <animatedsvg xmlns="http://www.w3.org/2000/svg" width="{24}" height="{24}" animatedprops="{animatedProps}" stroke="{'white'}" strokewidth="{2}" strokelinecap="round" strokelinejoin="round" classname="feather feather-search">
      <circle cx="{11}" cy="{11}" r="{8}"></circle>
      <path d="m21 21-4.35-4.35"></path>
    </animatedsvg>
  );
};
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema con el código es que el valor compartido fill se declara como un objeto. Y cuando el gancho useAnimatedProps actualiza el valor de fill, está actualizando las propiedades del objeto que no es reconocido por el componente Svg.

    Para solucionar esto, fill debe declararse como un valor de cadena que representa el color de relleno.

    Aquí está el código actualizado:

    import Animated, {
  useAnimatedProps,
  useSharedValue,
} from 'react-native-reanimated';
import Svg, { Circle, Path } from 'react-native-svg';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);

export default ({ isFocused }) => {
  const fill = useSharedValue('transparent');
  const animatedProps = useAnimatedProps(() => {
    fill.value = isFocused ? 'red' : 'transparent';

    return {
      fill: fill.value,
    };
  });
  return (
    <animatedsvg xmlns="http://www.w3.org/2000/svg" width="{24}" height="{24}" animatedprops="{animatedProps}" stroke="white" strokewidth="{2}" strokelinecap="round" strokelinejoin="round" classname="feather feather-search">
      <circle cx="{11}" cy="{11}" r="{8}"></circle>
      <path d="m21 21-4.35-4.35"></path>
    </animatedsvg>
  );
};

    En el código actualizado, fill se declara como un valor de cadena y sus propiedades se actualizan directamente en el gancho useAnimatedProps. El objeto animatedProps ahora contiene la propiedad fill con el color de relleno actualizado.

Comments are closed.