React原生动画第二次无效

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（）将不会调用。为此，当您从另一个屏幕弹出（）时，您必须创建自己的回调方法来执行此动画。考虑下面的代码更改

第一个屏幕

  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()
  }

在pop（）导航到后面的第二个屏幕上，调用此回调

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