Animated.timing в componentDidUpdate в React Native - PullRequest
Новая
       18

Animated.timing в componentDidUpdate в React Native

0 голосов
/ 29 декабря 2018

Я пытаюсь сделать следующее 

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

Это не работает.

Во время отладки я заметил, что кнопка не существует во время componentDidUpdate и еще не была нарисована дляэкран.

Когда я попробовал эту анимацию после того, как все было визуализировано и нарисовано, она работает.

Можно ли здесь установить обратный вызов, который сообщит мне, что все было нарисовано и безопасноиспользовать эту анимацию?

1 Ответ

0 голосов
/ 12 января 2019 
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;

timing

...