Reactjs 如何将react本机动画API与"；%一起使用&引用；定位值？

我有一个SVG

，我想使用react native的

动画API

对其进行动画制作。特别是，我想使用

%

的相对定位来设置线的

x1

和

x2

属性的动画。但是，我无法将动画值与

“%”字符串组合。以下代码导致
NaN%
或
[对象]
：

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>
    )
}

从'react native'导入{Animated}；
从“react native Svg”导入{Svg，Line}；
const AnimatedLine=Animated.createAnimatedComponent（Line）；
常量myComponent=（道具）=>{
//props.underlineX1类似于：new Animated.Value（50）
返回(
)
}

当
props.underlineX1=50
时，我应该如何获得像
50%
这样的值

编辑：

使用
JSON.stringify（props.underlineX1）+“%”
方法时，我会收到初始定位的正确值，但不会执行动画（如果我直接使用绝对值而不结合
“%”，则效果很好）

const x1=props.underlineX1.interpolate({
输入范围：[01100]，
输出范围：['0%，'100%，]，
});

（注意：这是假设您的动画值将在0-100范围内）
您可以添加用于创建动画值的代码（
undernex1
和
undernex2
）以及如何通过道具将它们传递到
myComponent
？@MarekLisik您可以直接使用它，而无需从
道具传递。只需在myComponent中添加两个常量：
const underlineX1=new Animated.Value（50）
和
const underlineX2=new Animated.Value（70）
，并使用它们代替
props.underlineX1