React-Native 闪屏页倒计时3秒进入项目
首先声明:参考了转载的博主的方法,做了一点点修改
转载的博主文章地址:https://blog.csdn.net/yichensheng/article/details/84972366
首先看一下效果图
效果图.mp4
效果:
就是打开软件,右上角实现了一个倒计时进入项目,也可以点击右上角跳过实现进入项目的效果
思路:
1、写一个计时器方法:setInterval(clock,1000),setInterval定时器会实现每隔一秒钟,执行一次clock方法。
2、设一个变量值为计时的秒数,用以进行更新操作。这一步很关键,直接使用了state中的秒数来更新,state中的秒数在render()中是实时更新的,但它在一个方法中并不会更新,所以要赋值给一个变量来进行更新。
整体代码:
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
View,
Text,
TouchableOpacity,
} from 'react-native';
import { NavigationActions } from 'react-navigation';
export default class Splash extends Component {
constructor(props){
super(props);
this.state={
time: 3,
}
}
componentWillMount(){
//启动包含定时器的方法
this.startTimer()
}
startTimer(){
let timeChange;
//关键在于用time取代state中的time,进行计算和判断,因为state中的time在render里不断刷新,但在方法中不会进行刷新
let time = this.state.time;
const clock = () => {
if (time > 0) {
//当time>0时执行更新方法
time = time - 1;
this.setState({
time: time,
});
console.log(time);
} else {
//当time=0时执行终止循环方法
clearInterval(timeChange);
//当倒计时时间=0时,进入项目,这里使用了路由跳转
this.props.navigation.navigate({routeName: 'DefaultTab'});
}
};
//每隔一秒执行一次clock方法
timeChange = setInterval(clock,1000);
}
render(){
return(
<View style={styles.container}>
<TouchableOpacity
style={{
borderRadius: 2,
position: 'absolute',
right: 25,
top: 40,
justifyContent: 'center',
backgroundColor: 'rgba(225,225,225,0.5)',
width: 60,
height: 25,
alignItems: 'center'
}}
onPress={()=>{
//点击‘跳过’按钮,同样可以实现进入项目的效果
this.props.navigation.navigate('DefaultTab')
}}>
<Text style={{fontSize: 14, color: 'white'}}>跳过{this.state.time}s</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FF7F24',
}
});