经过动画定时完成,则转到主页

问题描述 投票:0回答:1

当一个动画计时结束,我想去登录页面,但我不知道该怎么做。有人能帮我吗?

并且还可以有人给我如何保存用户名和密码时输入您的用户名和密码登录页面的例子吗?

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
    }
});
react-native
1个回答
0
投票
// 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.
                 );
        })   
© www.soinside.com 2019 - 2024. All rights reserved.