如何检测react-native中的首次启动 [英] How to detect first launch in react-native
本文介绍了如何检测react-native中的首次启动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
检测 react-native 应用的首次启动和初始启动以显示入职/介绍屏幕的好方法是什么?
What is a good way to detect the first and initial launch of an react-native app, in order to show an on-boarding/introductory screen ?
推荐答案
你的逻辑应该遵循:
class MyStartingComponent extends React.Component {
constructor(){
super();
this.state = {firstLaunch: null};
}
componentDidMount(){
AsyncStorage.getItem("alreadyLaunched").then(value => {
if(value == null){
AsyncStorage.setItem('alreadyLaunched', true); // No need to wait for `setItem` to finish, although you might want to handle errors
this.setState({firstLaunch: true});
}
else{
this.setState({firstLaunch: false});
}}) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null})
}
render(){
if(this.state.firstLaunch === null){
return null; // This is the 'tricky' part: The query to AsyncStorage is not finished, but we have to present something to the user. Null will just render nothing, so you can also put a placeholder of some sort, but effectively the interval between the first mount and AsyncStorage retrieving your data won't be noticeable to the user.
}else if(this.state.firstLaunch == true){
return <FirstLaunchComponent/>
}else{
return <NotFirstLaunchComponent/>
}
}
希望能帮到你
这篇关于如何检测react-native中的首次启动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文