1

伙计，我正在使用 react-native-animatable 库。基本上，当我加载我的应用程序时，动画会运行，但是，当我转到另一个选项卡并返回初始页面时，动画不再运行。我认为这是因为它不再重新加载，我想知道如何重新加载组件。如您所见，视图有一个动画道具，它是必须加载的动画。

import React, { Component } from 'react';
import { Text, Button, StyleSheet, Image, ImageBackground, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import LinearGradient from 'react-native-linear-gradient';
import {Fonts} from '../components/Fonts';
import { createAnimatableComponent, View, } from 'react-native-animatable';


class Home extends React.Component {

    render() {

        return (
            <View style={styles.container}>

               <View animation='bounceInLeft'    
               style={styles.container1}>

                    <View style={styles.card1}>


                                <ImageBackground 
                                source={require('../images/pictures/runop.jpg')} 
                                style={{width:'100%', height:200, }}>


                                    <Text
                                        style={{fontSize:30, alignSelf:'center', color:'white',
                                        fontFamily:Fonts.Nunito}}
                                        > Sport Schema's</Text>

                                </ImageBackground>

                   </View>

               </View>


               <View animation='bounceInRight'  style={styles.container2}>

                    <View style={styles.card2}>
                        <Image 
                            source={require('../images/pictures/foodop.jpg')} 
                            style={{width:'100%', height:200}}/>   

                    </View>

               </View>

               <View animation='bounceInLeft'  style={styles.container3}>

                    <View style={styles.card3}>
                        <Image 
                            source={require('../images/pictures/blogop.jpg')} 
                            style={{width:'100%', height:200}}/>   

                    </View>

               </View>   

            </View>

        );

    }
}
4

2 回答 2

0

谢谢你的帮助。我最终让它用不同的方法工作。我使用 react-navigation 中的 withNavigationFocus 来获取当前屏幕的 isFocused 道具。然后我只使用了一个 if 语句，如果屏幕聚焦然后运行动画，否则不运行。

从'react-navigation'导入{withNavigationFocus}；

类 Profile 扩展 React.Component {

constructor(props) {
    super(props);

}        
render()

// 这会检查当前屏幕是否聚焦然后运行动画，否则不运行。

{

    if (this.props.isFocused && this.animation) {
        this.animation.bounce(800)
     }

    return (
        <View ref={(ref) =>  {this.animation = ref;}}

        style={styles.container3}>

            <View style={styles.card3}>
            <Text> hii</Text>

            </View>
        </View>

    );

}

}

}); 导出默认 withNavigationFocus(Profile); // <- 别忘了这个！！

于 2018-05-23T12:56:58.913 回答
0

如果您正在使用react-navigation，以下解决方案可能对您有用。

创建一个函数，该函数将在几毫秒后启动动画并将其作为参数传递到下一个屏幕。例子，

屏幕 A

animateFunction() {
  setTimeout(() => {
    // start your animation
  }, 100);
}

navigation.navigate(SCREEN_NAME, { startPrevScreenAnimation: animateFunction });

并且在组件卸载时在下一个屏幕中调用该函数 ( componentWillUnmount())。例子，

屏幕 B

componentWillUnmount() {
  this.props.navigation.state.params.startPrevScreenAnimation();
}

我说几毫秒是因为您希望动画在屏幕转换完成后开始。

或者

在屏幕上添加一个监听器，当屏幕处于焦点时触发一个事件。

if (this.props.navigation) {
  this.willFocusSubscription = this.props.navigation.addListener(
    'willFocus',
    () => { // Run your animation },
  );
}
于 2018-05-17T10:55:18.140 回答