Перезагрузка анимации React-native-animatable библиотека - PullRequest
Новая
       23

Перезагрузка анимации React-native-animatable библиотека

0 голосов
/ 17 мая 2018

Парень, я использую библиотеку реагировать-натив-анимация.В основном, когда я загружаю свое приложение, анимация запускается, однако, когда я перехожу на другую вкладку и возвращаюсь на начальную страницу, анимация больше не запускается.Я думаю, это потому, что он больше не перезагружается, и мне было интересно, как перезагрузить компонент.Как вы можете видеть, представление имеет анимационную опору, которая является анимацией, которая должна быть загружена. 

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 ]

0 голосов
/ 23 мая 2018

Спасибо за вашу помощь.В конце концов я получил его для работы с другим методом.Я использовал withNavigationFocus fromact-navigation, чтобы получить реквизиты isFocused текущего экрана.Тогда я просто использовал оператор if, если экран сфокусирован, а затем запускаю анимацию, иначе не делаю.

import {withNavigationFocus} из 'response-navigation';

Класс профиля расширяет 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>

    );

}

}

});экспорт по умолчанию с помощью NavigationFocus (Profile);// <- не забудь это !! </p>

0 голосов
/ 17 мая 2018

Если вы используете 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 },
  );
}
...