css - React Native 中的动画字段宽度

Question

我有 2 个文本输入，每个都带有 flex: 1。当我聚焦其中一个时，我将其变大-> flex: 1 -> flex: 2。

谁能给我一个例子，说明如何为这种宽度变化添加动画？

<TextInput style={{flex: 1'}} onFocus={() => this.makeBigger()}/>
<TextInput style={{flex: 1'}}/>

// the makeBigger will make the style look like this:
<TextInput style={{flex: 2'}} onFocus={() => this.makeBigger()}/>
<TextInput style={{flex: 1'}}/>

Answer 1

这可能是多余的，但不是设置 flex，它是 flex 属性 flex-grow、flex-shrink 和 flex 基础。我建议您显式设置 flex-grow。

我要做的是给他们一个类名，然后让 onFocus 事件更改类名。然后你可以将它添加到你的 CSS 中:

.baseClass {
  transition: 0.2s all ease-in-out;
}
.shrinkClass {
  flex-grow: 1;
}
.growClass {
  flex-grow: 2;
}