Перезагрузка анимации React-native-animatable библиотеки
парень, я использую библиотеку 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>
);
}
}
Ответы 2
Если вы используете react-navigation, приведенное ниже решение может сработать для вас.
Создайте функцию, которая запустит анимацию через несколько миллисекунд и передаст ее на следующий экран в качестве параметров. Пример,
ЭКРАН А
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 },
);
}
Спасибо за вашу помощь. В конце концов я заставил его работать другим методом. Я использовал withNavigationFocus из react-navigation, чтобы получить свойства isFocused текущего экрана. Затем я просто использовал оператор if, если экран сфокусирован, а затем запустить анимацию, иначе не нужно.
import {withNavigationFocus} из 'response-navigation';
class Profile extends 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 (Профиль); // <- не забывайте об этом !!