Как использовать реагирующий нативный анимированный API со значениями позиционирования "%"?

Question

У меня есть SVG <line>, который я хочу анимировать, используя Animated API реакционного натива. В частности, я хочу анимировать свойства x1 и x2 линии, используя относительное позиционирование с %. Однако я не могу объединить мое анимированное значение со строкой "%". Следующий код приводит к NaN% или [object Object]%:

import { Animated } from 'react-native';
import { Svg, Line } from 'react-native-svg';
const AnimatedLine = Animated.createAnimatedComponent(Line);

const myComponent = (props) => {
    //props.underlineX1 is something like: new Animated.Value(50)

    return(
        <Svg
            width="100%"
            height="100%">
            <AnimatedLine
                x1={`${props.underlineX1}%`} //or: x1={`${parseInt(props.underlineX1)}%`}
                x2={`${props.underlineX2}%`} //or: x2={`${parseInt(props.underlineX2)}%`}
                y1="40"
                y2="40"
                stroke={"green"}
                strokeWidth="2" />
        </Svg>
    )
}

Что я должен сделать, чтобы получить значения, такие как 50%, когда props.underlineX1 = 50?

РЕДАКТИРОВАТЬ:

При использовании метода JSON.stringify(props.underlineX1) + "%" я получаю правильные значения для начального позиционирования, но анимация не будет выполняться (что прекрасно работает, если я использую абсолютные значения напрямую без комбинации "%").

Answer 1

Чтобы преобразовать Animated.Value в вашу процентную строку, вам необходимо выполнить интерполяцию следующим образом:

const x1 = props.underlineX1.interpolate({
  inputRange: [0, 100],
  outputRange: ['0%', '100%'],
});

(примечание: предполагается, что ваши анимированные значения будут в ярости 0- 100)