Question

动画计时结束后，我想进入登录页面，但我不知道怎么做。有人可以帮我吗？

也有人可以给我一个有关保存用户名和密码的示例当输入您的用户名和密码登录页面时？

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
    }
});

Answer 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.
                 );
        })

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

1 个答案: