React本机componentDidUpdate中的Animated.timing

Question

我正在尝试执行以下操作

  componentDidUpdate() {
    Animated.timing(this.scaleValueAddAlertButton, {
      toValue: 1,
      duration: 225,
      easing: Easing.bezier(0.0, 0.0, 0.2, 1),
      useNativeDriver: Platform.OS === "android"
    });
  }

这不管用。

在调试过程中，我注意到该按钮在componentDidUpdate期间不在那里，并且还没有绘制到屏幕上。

当我尝试这个动画后，一切都被渲染和绘制，它工作。

有没有我可以在这里设置的回调，告诉我所有的东西都已经绘制好了，可以安全地使用这个动画了？

Answer 1

import React, { Component } from "react";

import { View, Animated } from "react-native";

class App extends Component {
  state = {
    borderRadius: new Animated.Value(100),
    loaded: false
  };

  componentDidMount() {
    // Let the component know when the data has loaded
    setTimeout(e => {
      this.setState({
        loaded: true
      });
    }, 2000);
  }

  componentDidUpdate(_, prevState) {
    // Check whether state has changed, else you might have loaded = true
    //  and every re-render will start the animation
    let hasStateChanged = prevState.loaded !== this.state.loaded;

    // Check if state has changed and data has been loaded
    if (hasStateChanged && this.state.loaded) {
      Animated.timing(this.state.borderRadius, {
        toValue: 16,
        duration: 1200,
        useNativeDriver: true
      }).start();
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Animated.View
          style={{
            height: 200,
            width: 200,
            borderRadius: this.state.borderRadius,
            backgroundColor: "red"
          }}
        />
      </View>
    );
  }
}

export default App;

​

​