Question

我使用了默认的“ Animated”包，并对应用程序中的动画进行了本机反应。以下代码中的动画运行正常。但是，当我导航到另一个页面并返回此屏幕时，动画无法正常工作。从地面上加载页面后，它只能再次工作。可能是什么原因？有人可以帮我解决这个问题。

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

在第二个屏幕上，当您弹出导航以返回时，调用此回调

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

React Native动画第二次不起作用

1 个答案: