Question

我是React Native的新手，最近一直在开发Quotes应用程序。在向上滑动或向左滑动时，它只是更改为新报价。我根据官方文档React Native Animations的建议添加了一些fadeIn过渡。当组件安装时，仅将一次应用fadeIn转换。 但是我希望每次用户滑动以查看新报价时都会一次又一次地发生。我什至将'componentDidMount'更改为'ComponentDidUpdate'，但没有用。

我已在博览会上添加了该项目 Expo Project Link

这是代码

import React, {Component} from 'react';
import {Animated, Dimensions } from 'react-native'
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback, TextInput, AsyncStorage} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import LinearGradient from 'react-native-linear-gradient';
import AnimatedLinearGradient, {presetColors} from 'react-native-animated-linear-gradient'

import Quotes from './quotes.json';
import Background from './background.json';


//-------------IMPORTS END---------------------------------------------


class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }

  componentDidMount() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 700,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  componentDidUpdate() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 700,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  render() {
    let { fadeAnim } = this.state;

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

//-------------Animation Class Ends------------------------------------


export default class App extends React.Component {

    state = {
        activeQuoteIndex: 0,
        backgroundColor: 0,
    }

    onSwipeLeft(gestureState) {
      this.state.activeQuoteIndex= Math.floor(Math.random() * (Quotes.length));
      this.state.backgroundColor= Math.floor(Math.random() * (Background.length));
    }
    onSwipeUp(gestureState) {
      this.state.activeQuoteIndex= Math.floor(Math.random() * (Quotes.length));
      this.state.backgroundColor= Math.floor(Math.random() * (Background.length));
    }

    onSwipe(gestureName, gestureState) {
      const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
      this.setState({gestureName: gestureName});
      switch (gestureName) {
        case SWIPE_LEFT:
          break;
        case SWIPE_UP:
          break;
      }
  }

    render() {

        const config = {
          velocityThreshold: 0.3,
          directionalOffsetThreshold: 80
        };

        const dimension = {
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height+50
        };

     const quote = Quotes[this.state.activeQuoteIndex]
     return (

         <View style={{backgroundColor: "#000", height: dimension.height,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center'}}>

        <GestureRecognizer
         onSwipe={(direction, state) => this.onSwipe(direction, state)}
         onSwipeLeft={(state) => this.onSwipeLeft(state)}
         onSwipeUp={(state) => this.onSwipeUp(state)}
         config={config}
         style={{
           height:dimension.height-310,
           width: dimension.width-70,
           backgroundColor: "#000",
           justifyContent: 'center',
           alignItems: 'center',
           borderRadius: 10
         }}
         >
         <FadeInView style={{width: 250, height: 550, backgroundColor: 'transparent'}}>
         <Text style={{fontSize: 24,
         padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>Quote</Text>
         <Text style={{fontSize: 20, padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>"{quote.quote}"</Text>
         <View style={{width: 60, height: 2, backgroundColor: Background[this.state.backgroundColor].background}}></View>
         <Text style={{fontSize: 14, padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>{quote.author}</Text>
         </FadeInView>

       </GestureRecognizer>
       </View>
    );
  }
}

Answer 1

没有运行您的代码，但我认为问题是这样的：一开始，您就设置了

fadeAnim：新的Animated.Value（0）

稍后，或者您说开始动画，然后您说

toValue：1

然后在componentDidUpdate中再次使用相同的值（1）。问题是您永远不要将值设置回0，因此不透明度从1到1进行动画设置-没有动画！

您需要找到一个好位置将动画值重置为零。据我记得，start（）调用还接受在动画完成时执行的回调。也许那会有所帮助。或者，也许您需要将动画状态移到App组件上。

未解答：React Native-每次应用动画组件更新

1 个答案: