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.
);
})
推荐阅读
- ssl - 如何从 cert9 生成 cert7.db。使用 certutil
- c - C:将整数值翻转为布尔值
- c# - 我的套接字服务器例程可以工作吗?
- java - Spring mvc - 初始加载页面问题
- checkbox - 未选中检查按钮时如何从标签中删除文本?
- css - 如何一次显示选择元素的所有选项?
- javascript - 无法在我的平均堆栈应用程序中加载本地图像
- angular - 离子标签不显示逗号
- javascript - 无法通过 DOM 获取文本 drom 输入标签
- python-3.x - 在 wagtail 页面中使用 django 表单时,如何处理 request.method == 'POST'?