是否使用 useState 反应原生动画 => new Animated.Value()？答案

【问题标题】：React native animation => new Animated.Value() with useState or not?是否使用 useState 反应原生动画 => new Animated.Value()？
【发布时间】：2019-09-27 14:25:35
【问题描述】：

在 react-native 中使用 Animated.Value() 的最佳方式是什么？

是否使用 useState() ？

const [fadeAnim] = useState(new Animated.Value(0))

或者

const fadeAnim = new Animated.Value(0)

React-native 文档：https://facebook.github.io/react-native/docs/animations

谢谢

【问题讨论】：

标签： react-native react-hooks

【解决方案1】：

其实，Hook 是一个更好的方法，所以我会说第一选择

【讨论】：

你能解释一下为什么吗？使用没有“setX”的useState似乎有点奇怪
Hook 和 not Hook 是一样的。实际上 Hook 更具延展性，因为你可以让你的代码更干净，例如，你可以发明属性来传递给另一个 scrren 页面，或者在单独的文件中呈现 itemlist 的单个项目。概念是一样的，只是语法上的变化

【解决方案2】：

我遇到了一个狡猾的 UI 错误，其中设置挂钩值会立即呈现在视图中并弄乱动画。我通过将动画值放入 useState 挂钩来解决此问题，如下所示：

之前：

const foo = new Animated.Value(1)

之后：

  const [foo] = useState(new Animated.Value(1));

【讨论】：

【解决方案3】：

我最近一直在用这个：

const [fadeAnim] = useState(() => new Animated.Value(0));

对于设定值的标准：

fadeAnim.setValue(0);

另外，您可能还想看看useRef，因为这是documentation 推荐的：

const fadeAnim = useRef(new Animated.Value(0)).current;
/* 
... 
*/
fadeAnim.setValue(0);

【讨论】：

fadeAnim.setValue 不是函数
@nishi 这是一种方法。 reactnative.dev/docs/animatedvalue#setvalue

【解决方案4】：

按照https://reactnative.dev/docs/animated 和https://reactnative.dev/docs/animations#animated-api 中的建议使用useRef()。

const [fadeAnim] = useState(() => new Animated.Value(0));相同，但语义上的“状态”意味着 getter 和 setter - 没有 setter 'fadeAnim' 在组件的整个生命周期中都是相同的，因此与 useRef(...).current

【讨论】：