React Native Fade In Animation 不流畅

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 View 的不透明度，使其隐藏和可见。然而，这样做的作用是，当用户键入电子邮件时，它将被验证，并且 getData() 的其余代码将运行并启动动画，使 Code View 可见。

问题

有两个问题。

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

1) 第一个盒子（Email Box）也随着代码盒子移动。

2) 动画不流畅。边界出现和消失。这既烦人又不漂亮。

那么我该如何解决它们呢？我通过更改代码尝试了所有方法，但没有任何效果。

Answer 1

由于您尚未使用代码发布样式，我猜包含您的两个 TextInputs 的容器必须被证明居中。

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

JustifyContent: ‘center’

如果是这样，请将其删除并在您的第一个 TextInput 框中添加一个 marginTop。运动会如你所料。