我对<Rect />元素进行了简单的动画插值，但是我的 ui 上没有任何变化，好像宽度保持为 0。
我手动将我的最终值添加到组件中width={149.12}并正确显示它，因此我现在有点困惑为什么它没有从动画中获取相同的值？
反应原生@0.57.1
react-native-svg@7.03
针对 iOS 12
这是完整的实现，本质上是一个包含当前值和总值的法力和健康条，即 50 和 100 应该显示矩形的半角。（示例使用打字稿，但如果需要，答案可以是纯 js）
import * as React from 'react'
import { Animated } from 'react-native'
import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
import { deviceWidth } from '../services/Device'
const barWidth = deviceWidth * 0.3454
const barHeight = barWidth * 0.093
const AnimatedRect = Animated.createAnimatedComponent(Rect)
/**
* Types
*/
export interface IProps {
variant: 'MANA' | 'HEALTH'
currentValue: number
totalValue: number
}
export interface IState {
width: Animated.Value
}
/**
* Component
*/
class HealthManaBar extends React.Component<IProps, IState> {
state = {
width: new Animated.Value(0)
}
componentDidMount() {
const { currentValue, totalValue } = this.props
this.animate(currentValue, totalValue)
}
componentDidUpdate({ currentValue, totalValue }: IProps) {
this.animate(currentValue, totalValue)
}
animate = (current: number, total: number) =>
Animated.timing(this.state.width, {
toValue: current !== 0 ? current / total : 0,
duration: 400
}).start()
render() {
const { variant } = this.props
const { width } = this.state
return (
<Svg width={barWidth} height={barHeight}>
<Defs>
<LinearGradient
id={`HeathManaBar-gradient-${variant}`}
x1="0"
y1="0"
x2="0"
y2={barHeight}
>
<Stop
offset="0"
stopColor={variant === 'HEALTH' ? '#EC561B' : '#00ACE1'}
stopOpacity="1"
/>
<Stop
offset="0.5"
stopColor={variant === 'HEALTH' ? '#8D1B00' : '#003FAA'}
stopOpacity="1"
/>
<Stop
offset="1"
stopColor={variant === 'HEALTH' ? '#9F3606' : '#007C97'}
stopOpacity="1"
/>
</LinearGradient>
</Defs>
<AnimatedRect
x="0"
y="0"
rx="3"
ry="3"
width={width.interpolate({
inputRange: [0, 1],
outputRange: [0, barWidth]
})}
height={barHeight}
fill={`url(#HeathManaBar-gradient-${variant})`}
/>
</Svg>
)
}
}
export default HealthManaBar
相关库：https ://github.com/react-native-community/react-native-svg