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

Question

更新：19/12/8

由于@Lenoarod的指针，我能够成功实现我要执行的行为。

我正在发布完整的解决方案，以回馈给SO社区。如果您像我一样不熟悉React Native，并且正在寻找基本组件动画的轻量级现成示例，请看一下：）

这里是指向我的snack的链接。编码愉快！

Answer 1

Animated.timing如文档所述：根据时间缓动动画值  曲线。;因此，当动画结束时，animatedVaule等于toValue，因此必须重新设置animatedValue。

您定义的animatedValue是全局的，建议您在组件中定义它。

为什么在1秒钟后不隐藏该组件；因为默认功能不会对此进行绑定。您尝试使用箭头功能。然后检查是否调用了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)
}

对于常规函数，这表示调用该函数的对象；如果您想进一步了解箭头功能，可以使用箭头功能代表该功能的所有者，您可以看到此site

最后，我在点心中发现动画很慢。所以我建议您使用react-native-animatable