reactjs - 重新加载动画 React-native-animatable 库
问题描述
伙计,我正在使用 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>
);
}
}
解决方案
谢谢你的帮助。我最终让它用不同的方法工作。我使用 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); // <- 别忘了这个!!
推荐阅读
- r - 调用以网状为源的函数时,R 因段错误而崩溃
- python - 如何测试字符串包含列表中的元素并通过 Pandas 将目标元素分配给另一列
- ruby-on-rails - Rails 5:使用用户名或电子邮件设计登录
- angular - 当给定类型的组件被路由器激活时接收通知
- javascript - 反应错误:从受控组件到不受控组件
- docker - Docker:如何映射到正在运行的实例上的目录?
- javascript - 定义将在函数调用之后运行的回调的正确方法是什么?
- java - Mongo 模板的 findAndModify 返回空值以添加或更新嵌套元素
- java - 使用 Spring Aspect 监控方法
- java - 自定义字体不会在 canvas.drawText 上改变