javascript - react native : How to move Input from center to top with animation?

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 .