Animate SVG React Native - PullRequest
       14

Animate SVG React Native

0 голосов
/ 18 мая 2018

Я пытаюсь изменить высоту прямоугольника в SVG.Прежде всего, мой svg правильно отображается, прежде чем я использую Анимированные API.Затем я пытаюсь привязать переменную высоты к SVG так:

render() {
let AnimatedRectangle = Animated.createAnimatedComponent(Rect);
let {height} = this.state
return (
  <View style={styles.wrapper}>
    <Svg height="100" width="100" x="0" y="0" fill="#333">
      <AnimatedRectangle
        x="0"
        y="0"
        width="4"
        height={height}
        fill="#333"
      />
      <Rect x="10" y="0" width="4" height="7" fill="#333" />
      <Rect x="20" y="0" width="4" height="7" fill="#333" />
    </Svg>
  </View>
);}

Вот мой метод state и componentDidMount:

state = {
  height: new Animated.Value(5)
};



 componentDidMount() {
    Animated.timing(
      // Animate value over time
      this.state.height, // The value to drive
      {
        toValue: 30 // Animate to final value of 1
      }
    ).start(); // Start the animation
  }

Это не работает, даже если моя анимация работает,Действительно, если я связываю высоту с простым Animated.View, высота корректно изменяется.

Вот ошибка, которую я получаю:

enter image description here

...