反应原生淡入动画不流畅

Question

我正在创建类似于www.icloud.com登录的动画。这意味着当用户键入他/她的电子邮件时，密码框会出现淡入淡出的动画。下面是我要实现的目标。

我的代码

但是我创建了下面的代码。

constructor () {
  super()
  this.animatedValue = new Animated.Value(0)
}

state ={
    hideEmail:false,
} 

animate () {
this.animatedValue.setValue(0)
Animated.timing(
  this.animatedValue,
  {
    toValue: 1,
    duration: 1000,
    easing: Easing.linear
  }
 ).start()
}

render() {

const marginTop = this.animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
})

return (
  <View style={styles.container}>
    <View style={{paddingBottom:10}}>
      <TextInput 
        placeholder='Registered Email' 
        returnKeyType='go'
        style={{borderWidth:0.5}}
        onSubmitEditing = {(event) => this.getData()}>
      </TextInput>
    </View>
    <Animated.View style={{marginTop,opacity:!this.state.hideEmail?0:1}}>
      <TextInput 
        placeholder='Code' 
        style={{borderWidth:0.5}}>
      </TextInput>
    </Animated.View>
  </View>
);

getData = (email) => {
  // Validate and if it's correct email, below code will run
  this.animate();
  this.setState({hideEmail:true});
}

在这里，我使用了hideEmail状态来更改Code视图的不透明度以使其隐藏和可见。但是这样做是，当用户键入电子邮件时，它将被验证，并且将运行getData（）的其余代码，并通过使Code View可见来启动动画。

问题

有两个问题。

如您所见，当电子邮件类型（我没有正确验证它。只是为了演示其工作原理）并输入时，出现代码框并开始设置动画。但是有两个问题。

1）第一个框（电子邮件框）也随代码框一起移动。

2）动画不流畅。边界线出现并消失。这很烦人而且不漂亮。

那我该如何解决呢？我通过更改代码尝试了所有操作，但没有任何效果。

Answer 1

由于您尚未在代码中发布样式，因此我认为包含两个TextInputs的容器必须对齐中心。

只需检查您的容器是否包含以下代码即可。

JustifyContent: ‘center’

如果是，请将其删除，然后在第一个TextInput框中添加marginTop。运动会如您所料。