时间戳

首页 > 解决方案 > React Native 中的基本可重复组件动画示例

react-native - React Native 中的基本可重复组件动画示例

问题描述

更新：19 年 12 月 8 日

感谢@Lenoarod 的指点，我能够成功地实现我所追求的行为。

我正在发布完整的解决方案以回馈 SO 社区。如果你像我一样是 React Native 的新手，并且正在寻找一个轻量级的、随时可用的基本组件动画示例，请看一下 :)

这是我的小吃的链接。快乐编码！

在此处输入图像描述

标签： react-nativeanimation

解决方案

Animated.timing正如文档所说：沿定时缓动曲线为值设置动画。; 所以当动画结束时，animatedVaule等于toValue，所以你必须重新设置animatedValue。

你定义animatedValue的是全局的，我建议你在组件中定义。

至于为什么1秒后，组件没有隐藏；因为默认函数不绑定 this。您尝试使用箭头功能。然后检查是否this.setState被调用并被showMessage设置false。




export default class App extends React.Component {
   constructor(props) {
      super(props)
      this.animatedValue = new Animated.Value(0)
      this.state={
         fontSize: 1,
         isVisible: false,
      }
   }
}

animateText() {

 this.animatedValue.setValue(0) 
 this.setState({showMessage: true})

 Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 250,
      easing: Easing.ease
    }).start(() => {
      // Animation Complete
    })

 setTimeout(() => {
      this.setState({
        showMessage: false,
      })
    }, 1000)
}

对于常规函数，this 表示调用该函数的对象；使用箭头函数 this 代表函数的所有者如果您想了解更多关于箭头函数的信息，您可以查看此站点

最后，我发现小吃中的动画很慢。所以我建议你使用react-native-animatable

推荐阅读