React Native

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;