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。