Reactjs 我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗

发布于01月19日

我需要一个视图来动画的地方时，一些props 的价值发生变化，使用 react native 重生

例如，我只能在使用onPress函数更改useSharedValue值的用户点击上找到动画.但我似乎找不到如何在props 变化时设置动画.因此，目前我使用的是useEffect.

export const SomeComponent = ({
  top,
  left
}) => { 
  const animation = useSharedValue({
    top,
    left
  });

  useEffect(() => {
    animation.value = { top, left };
  }, [top, left]);

  const animationStyle = useAnimatedStyle(() => {
    return {
      top: withTiming(animation.value.top, {
      duration: 1000
      }),
      left: withTiming(animation.value.left, {
      duration: 1000
      })
    };
  });
}

在上面的代码中，props 可以改变值，我应该像现在一样使用useEffect触发动画吗？或者有没有更好的方法用复活的.

推荐答案

有意思的.这管用吗？我从来没有见过这样做的.

是的，Use Effect是触发动画的好方法.通常我会这样做:

const duration = 1000;

export const SomeComponent = ({
  top: topProp,
  left: leftProp
}) => { 
  const top = useSharedValue(topProp);
  const left = useSharedValue(leftProp);

  useEffect(() => {
    top.value = withTiming(topProp, { duration });
    left.value = withTiming(leftProp, { duration });
  }, [topProp, leftProp]);

  const animationStyle = useAnimatedStyle(() => ({
    top: top.value,
    left: left.value,
  }));

  return <Animated.View style={animationStyle}>
    //...
}

这些值被拆分，因此它们是原始值.我不知道这是否会影响性能--我以前从未将对象用作共享值.
这些风格直接来自于共同的价值观.
UseEffect等待props 更改，然后运行动画.

我从来没有try 过在样式中运行动画-它似乎不应该对我起作用，但我可能是错的！

Reactjs相关问答推荐

URL参数和React路由中的点

为什么安装FLOBIT后，所有的输入FIELD现在都有一个蓝色的轮廓？

Reactjs 我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗

推荐答案

Reactjs相关问答推荐

URL参数和React路由中的点

为什么安装FLOBIT后，所有的输入FIELD现在都有一个蓝色的轮廓？

如何在MUI X数据网格列中显示IMG？

如何访问子集合中的文档？

如何使用useState响应快速/顺序状态更新

有没有比；KeyableShell；组成部分

验证 Yup 中的对象项

从 redux 调用UPDATE_DATA操作时状态变得未定义

React Js和Firestore中如何将当前ID与集合中的ID查询以仅显示具有相似字段和值的文档-第二部分

未捕获的运行时错误：对象作为 React 子项无效

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误：没有当前用户

使用 map 循环浏览列表列表中的列表并显示它们

在react 中从外部 api 渲染列表

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别？我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗？

将 useState 设置为组件内部的值

我正在try 使用 cypress 测试我的下拉列表，它 Select 值但不提交它们(手动工作)

如何从 graphql/apollo 中的缓存中清除多个查询

是什么导致了这个令人惊讶的数组导致 React

react-query、react-hook-form 和表单验证

React 检测哪些 props 在 useEffect 触发器上发生了变化