家伙我正在使用react-native-animatable库。基本上,当我加载我的应用程序动画运行时,然而,当我转到另一个选项卡并返回到初始页面时,动画不再运行。我认为这是因为它'不再重新加载,我想知道如何重新加载组件。如您所见,View有一个动画道具,它是必须加载的动画。
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>
);
}
}
答案 0 :(得分: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 },
);
}
答案 1 :(得分:0)
感谢您的帮助。我最终让它用不同的方法工作。 我使用了react-navigation中的withNavigationFocus来获取当前屏幕的isFocused道具。然后我只使用if语句,如果屏幕是聚焦的,那么运行动画否则不。
从'react-navigation'导入{withNavigationFocus};
class 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); //&lt; - 别忘了这个!!