Question

我对React Native的问题似乎是项目范围的。任何使用Animated API的东西都不会运行。我正在运行React Native 0.49.2，似乎没有什么工作，我尝试了几个人的代码，没有任何事情发生过。每当我调用“Animated.Timing（）。start（）;”时，我的问题似乎就出现了。它从未真正开始。下面是一些简短的示例代码：

class Splash extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      ShowSetup: true,
      fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
    };

  }

  componentDidMount(){
    this.Animator()
  }

  Animator(){
    console.log("ANIMATOR RUNNING!")
    Animated.timing(                  // Animate over time
     this.state.fadeAnim,            // The animated value to drive
     {
       toValue: 1,                   // Animate to opacity: 1 (opaque)
       duration: 10000,              // Make it take a while
     }
   ).start();                        // Starts the animation


  }


  render() {
    let { fadeAnim } = this.state;
    return (
      <View style={{flex: 1, backgroundColor: 'blue'}}>

      <Animated.View                 // Special animatable View
       style={{
         opacity: fadeAnim,         // Bind opacity to animated value
       }}
     >
       <Text>Fade In</Text>
     </Animated.View>
      </View>
    );
  }
}

无论你等多久，价值都不会显示出来。对我来说已经成了一个大问题，因为我不知道还能做什么

Answer 1

试试这个：

  <View style={{flex: 1, backgroundColor: 'blue'}}>

    <Animated.View                    // Special animatable View
     style={{
       opacity: this.state.fadeAnim,  // Bind opacity to animated value
     }}
    >
      <Text>Fade In</Text>
    </Animated.View>
  </View>

我认为您在渲染顶部声明的fadeAnim变量未被重新分配

- 编辑 -

这是我使用的一些动画代码，渲染的实现方式与你拥有的相同。

  constructor() {
    super();
    this.state = {
      topBoxOpacity: new Animated.Value(0),
      leftBoxOpacity: new Animated.Value(0),
      mainImageOpacity: new Animated.Value(0),
    }
  }

  componentDidMount() {
    const timing = Animated.timing;
    Animated.parallel([
      timing(this.state.leftBoxOpacity, {
        toValue: 1,
        duration: 700,
        delay: 700,
      }),
      timing(this.state.topBoxOpacity, {
        toValue: 1,
        duration: 700,
        delay: 1400,
      }),
      timing(this.state.mainImageOpacity, {
        toValue: 1,
        duration: 700,
        delay: 2100,
      }),
    ]).start();
  }

React Native Animations根本没有运行

1 个答案: