React Native中用Animated做淡入动画为什么没效果？

百里美蓝提问于 2026-03-04 23:33:17 阅读 7

框架

我照着文档写了Animated的淡入动画，但opacity根本没变化，组件还是直接显示出来，试了start回调也没触发，是不是哪里写错了？

代码是这样的：

const opacity = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.timing(opacity, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }).start();
}, []);

return <Animated.View style={{ opacity }}>{children}</Animated.View>;

我来解答赞 1 收藏

反馈

1 条解答

皇甫子墨 Lv1

哈，这个问题我踩过坑！关键点在于useNativeDriver和Animated.View的配合问题。

你的代码其实没大毛病，但是useNativeDriver: true时，只有特定样式属性能用（比如opacity确实可以）。但还有个隐藏坑：必须确保Animated.View的父容器没有设置overflow: 'hidden'之类的样式，否则动画会被吃掉。

试试这样改：

useEffect(() => {

  Animated.timing(opacity, {

    toValue: 1,

    duration: 500,

    useNativeDriver: true, // 这里true没问题

  }).start(({finished}) => {

    console.log('动画结束', finished); // 现在应该能触发回调了

  });

}, []);



// 确保父容器没加overflow样式

return (

  

    

      {children}

    

  

);

如果还不行，可以先临时把useNativeDriver设成false测试下，能跑通的话就肯定是父容器样式问题。RN的动画有时候就是这么玄学，调试全靠console.log...

2026-03-05 03:42