组件重新渲染 onChangeText

Question

我制作了一个自定义 TextInput，我正在将其动画化到我的注册屏幕组件上。问题是，每次击键 onChangeText 时，动画都会再次播放，这不是预期的行为。如果我取出动画，TextInput 工作正常。

我尝试改变对 useState 的依赖，也尝试用 useCallback 和 useMemo 包装组件，但都没有让它工作。

另外值得注意的是，我正在使用 useReducer 处理我的状态管理。代码如下

ssh

Answer 1

您可以尝试使用 React.useCallback()

包装动画

Answer 2

所以从进一步的研究中，事实证明，由于我使用始终不变的值（宽度）为组件设置动画，onTextChange 将始终重新渲染屏幕，任何不同的值都将被考虑在内，因此，由于当前值与初始值不同，动画再次播放。

我的解决方案： 第一个动画完成后，我必须使用 useState 更改初始值。我还必须在以这种方式在动画之后运行的 setTimeout 中调用它 - 初始宽度将更新为当前宽度，并且当组件重新呈现时，它不会再次呈现。 （或者在这种情况下，平移 X 值没有差异，因此动画不会再次播放）