Реактивная нативная анимация не работает во второй раз

Question

Я использовал стандартный пакет «Анимированные» с реагировать нативно для моих анимаций в приложении.Анимации в следующем коде работают нормально.Но когда я перехожу на другую страницу и возвращаюсь на этот экран, анимация не работает.Как только страница загружается с уровня земли, она снова работает.Что может быть причиной ?Может кто-нибудь, пожалуйста, помогите мне разобраться в этом.

class LoginScreen extends Component {
  static navigationOptions = {
    header: null
  }
  state = {
    username: '',
    password: '',
    animation: {
       usernamePostionLeft: new Animated.Value(795),
       passwordPositionLeft: new Animated.Value(905),
       loginPositionTop: new Animated.Value(1402),
       statusPositionTop: new Animated.Value(1542)
    }
  }
  navigateToScreen = link => event => {
    this.props.navigation.navigate(link)
  }
  componentDidMount() {
    const timing = Animated.timing
    Animated.parallel([
       timing(this.state.animation.usernamePostionLeft, {
        toValue: 0,
        duration: 1700
    }),
    timing(this.state.animation.passwordPositionLeft, {
        toValue: 0,
        duration: 900
    }),
    timing(this.state.animation.loginPositionTop, {
        toValue: 0,
        duration: 700
    }),
    timing(this.state.animation.statusPositionTop, {
        toValue: 0,
        duration: 700
    })
  ]).start()
 }
render() {
  return (
    <View style={styles.container}>
      <ImageBackground 
        source={lem_bg} 
        blurRadius={10}
        style={styles.imageBgContainer}>
        <View style={styles.internalContainer}>
          <Animated.View style={{position: 'relative', top: 
           this.state.animation.usernamePostionLeft, width: '100%'}}>
           <Text style={styles.LEMHeader}>LEM<Text style={styles.followingtext}>mobile</Text></Text>        
          </Animated.View>
    </ImageBackground>
  </View>
....MORE JSX ARE THERE...
  )
}

}

Answer 1

componentDidMount () не будет вызываться при переходе назад с другого экрана.для этого вам нужно создать свой собственный метод обратного вызова для выполнения этой анимации, когда вы pop () с другого экрана.Ниже приведено изменение кода

первого экрана

  navigateToScreen = link => event => {
    this.props.navigation.navigate(link,{
      callback:this.runAnimation
    })
  }
  componentDidMount() {
    this.runAnimation()
  }

  runAnimation(){
    const timing = Animated.timing
    Animated.parallel([
      timing(this.state.animation.usernamePostionLeft, {
        toValue: 0,
        duration: 1700
      }),
      timing(this.state.animation.passwordPositionLeft, {
        toValue: 0,
        duration: 900
      }),
      timing(this.state.animation.loginPositionTop, {
        toValue: 0,
        duration: 700
      }),
      timing(this.state.animation.statusPositionTop, {
        toValue: 0,
        duration: 700
      })
    ]).start()
  }

на втором экране, когда вы нажимаете () навигацию назад, вызывайте этот обратный вызов

 this.props.navigator.pop()
 this.props.callback()