React Native：如何用动画将输入从中心移动到顶部？

Question

我正在尝试创建一个输入，当用户开始输入一些文本时，该输入将从中心移动到顶部。我怎样才能改变justifyContent: 'center'动画justifyContent: 'flex-start'？或者也许我应该用另一种方式来做？

我的代码：

<View style={styles.container}>
  <SearchInput
    onChangeText={this.handleInputChange}
  />
</View>

和风格：

const styles = {
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    flexDirection: 'column'
  }
};

Answer 1

您应该能够通过使用免费实现这一目标LayoutAnimation。

这就是你要做的，显然有些事情被遗漏了：

handleFocus = () => {
  LayoutAnimation.easeInEaseOut();
  this.setState({
    isSearching: true,
  });
};

render() {
  const style = {
    justifyContent: this.state.isSearching
      ? 'flex-start'
      : 'center',
  };
  return (
    <TextInput onFocus={this.handleFocus} style={style} />
  );
}

如果这不起作用（我对此表示怀疑），您将不得不使用Animated.