动画计时完成后,转到主页

  • 本文关键字:主页 动画 react-native
  • 更新时间 :
  • 英文 :


当动画计时结束时,我想去登录页面,但我不知道如何做到这一点。有人可以帮助我吗?

还有人可以给我一个关于保存用户名和密码的例子何时输入您的用户名和密码进入登录页面?

import React from 'react';
import { Animated, Text, View, StyleSheet, Image, TouchableOpacity, Navigator } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './Login';

export default class Home extends React.Component {
    state={
        fadeAmin: new Animated.Value(1),
    }
    componentDidMount() {
        this.setState({ fadeAnim: new Animated.Value(1) },
        () => {
          Animated.timing(          // Animate over time
            this.state.fadeAnim, // The animated value to drive
            {
              toValue: 0,           // Animate to opacity: 1 (opaque)
              duration: 5000,
                  // 2000ms
            }
          ).start();
        })              // Starts the animation
    }
    render() {
      let { fadeAnim } = this.state;

        return (
          <View style = {{flex:1, alignItems:"center", justifyContent:'center'}}>
            <Animated.View style={{ ...this.props.style, opacity: fadeAnim }} >
            {this.props.children}
              <Image style={styles.logo} source={require('../../image/maxresdefault.jpg')} />           
            </Animated.View>
            {/* <TouchableOpacity onPress={this.fadeOut} >
              <Text style={{ color: 'white', textDecorationLine: 'underline', marginTop: 10 }}>
              fade out
              </Text>
            </TouchableOpacity> */}
          </View>
        );      
    }
  }
  const styles = StyleSheet.create({
    logo: {
      resizeMode:'cover',
      flex:1
    }
});
// All you need is to pass a callback to start() like this;
Animated.timing(    
            this.state.fadeAnim,
            {
              toValue: 0,        
              duration: 5000,
            }
          ).start(
            ()=>{} // this is your callback which will trigger after animation ends.
                 );
        })   

相关内容

  • 没有找到相关文章

最新更新