Javascript 动画中的反应本机淡入不是平滑的

我正在创建一个类似于登录的动画。这意味着当用户键入他/她的电子邮件时，密码框会显示淡入动画。下面是我想要实现的

我的代码

然而，为了做到这一点，我创建了下面的代码

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

构造函数（）{
超级（）
this.animatedValue=新的Animated.Value（0）
}
陈述={
hideEmail:false，
} 
制作（）{
此.animatedValue.setValue（0）
时间(
这个.animatedValue，
{
toValue:1，
持续时间：1000，
放松：放松。线性
}
).start（）
}
render（）{
常量marginTop=this.animatedValue.interpolate({
输入范围：[0，1]，
输出范围：[01100]
})
返回(
this.getData（）}>

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

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

2） 动画不是平滑的。边界出现和消失。这很烦人，也不漂亮

那么我该如何修复它们呢？我通过更改代码尝试了所有方法，但没有任何效果。
因为您没有在代码中发布样式，我想包含两个文本输入的容器必须对齐到中心

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

JustifyContent: ‘center’

如果是这样，请将其删除并在第一个文本输入框中添加marginTop。运动将如你所料
 在代码中添加样式。哦，我明白了。删除“正当化”内容成功了。但是边界宽度的衰减又如何呢？我试图重现你的问题，但每当这个动画发生时，在我的情况下，边界宽度仍然没有减少。