Reanimated中useAnimatedStyle不生效是怎么回事？

Dev · 博潇提问于 2026-03-05 21:10:19 阅读 2

移动

我在用Reanimated做列表项滑动删除动画，但useAnimatedStyle返回的样式完全没反应，元素还是静止不动。

试过把translateX直接写死成100，也无效。控制台也没报错，共享值offset打印出来是有变化的。

代码结构大概是这样：

const offset = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [{ translateX: offset.value }]
  };
});
// 在JSX里用了 <Animated.View style={[styles.item, animatedStyle]} />

移动端动画

我来解答赞 2 收藏

反馈

1 条解答

Zz珍珍 Lv1

这个问题我遇到过，大概率是你的Babel插件没配好。Reanimated 2要求必须配置babel-plugin-reanimated，不然useAnimatedStyle就是摆设。

先检查babel.config.js里有没有这行：

plugins: ['react-native-reanimated/plugin']

然后建议改成这样测试：
1. 确保你从reanimated2导入：
import Animated from 'react-native-reanimated'
而不是react-native自带的那个

2. 试试给手势加个简单监听：

const panGesture = Gesture.Pan()

  .onUpdate((e) => {

    offset.value = e.translationX

  })

如果还不行，清空metro缓存重启：npx react-native start --reset-cache

我上次被这坑了一下午，结果发现是新项目忘记配babel插件...（捂脸）

2026-03-05 21:12