React Native 中的动画字段宽度

Posted 2023-03-15

【中文标题】React Native 中的动画字段宽度

【英文标题】：Animate field width in React Native

【发布时间】：2018-08-22 10:46:33

【问题描述】：

我有 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'/>

【问题讨论】：

我不相信可以使用 flex 属性应用动画或过渡。而是尝试使用 width 属性。例如。它的默认状态可以是width: 50%，焦点状态可以是width: 100%

但是，如果我使用宽度而不是 flex，我该如何制作动画？

【参考方案1】：

这可能是多余的，但不是设置flex，它是弹性属性flex-grow、flex-shrink 和flex-basis 的集合。我建议你明确设置flex-grow。

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

.baseClass 
  transition: 0.2s all ease-in-out;

.shrinkClass 
  flex-grow: 1;

.growClass 
  flex-grow: 2;

【讨论】：

React Native 中的转换属性？

嘿嘿好电话。我没有看到 react-native 标签，因为我订阅了 reactjs 标签 :) 我们会看到他说的话，如果没有帮助，我将不得不编辑我的答案并输入 react-native-animatable或 react-native-css-transition

LayoutAnimation 显然有效。我正在运行一个 android 模拟器，如果您不启用 LayoutAnimation，则默认情况下它不起作用。 Tnx 反正 ;)

酷 :) 开发的时候为什么不在手机上模拟呢？

我把我的 MacBook 加密狗忘在家里了...#donglelife...据我所知，世博会停止使用二维码