react-native - 为动画 React Native 重置动画

Question

我在 React Native 中尝试使用 resetAnimation() 时偶然发现了一个问题。

我正在尝试构建一个animated.view，当一个新视图显示在一个没有反馈的可触摸组件上时它会重置。

我无法弄清楚如何重置动画，以便当我按下我的可触摸而没有反馈时，动画会重置并重新开始显示新的动画。它在第一次渲染时运行，但随后停止并正常显示文本。

这是我的一些代码片段。

import React, { useState, useEffect } from 'react';
import { Animated, StyleSheet } from 'react-native';


    const FadeView = (props) => {
      const [fadeAnim] = useState(new Animated.Value(0));  // Initial value for opacity: 0

      React.useEffect(() => {
        Animated.timing(
        fadeAnim,
        {
            toValue: 1,
            duration: 1000,
        }

        ).start(fadeAnim.resetAnimation())
    }, []);


      return (
        <Animated.View                 // Special animatable View
          style={{
            ...props.style,
            opacity: fadeAnim,         // Bind opacity to animated value
          }}
        >
          {props.children}
        </Animated.View>
      );

    }


    const styles = StyleSheet.create({
        view:{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        },

    });

    // You can then use your `FadeInView` in place of a `View` in your components:
    export default FadeView;

以及我尝试使用它的地方。

<FadeView>
  <Text style = {styles.gameText}> {question} </Text>
</FadeView>

标签： react-native

Answer 1

我设法通过删除

, []

在......的最后).start(fadeAnim.resetAnimation()) }, []);

并添加

fadeAnim.resetAnimation();

在那个代码块之后。