反应原生 :有办法检测它是否是应用程序的首次启动?

Question

有办法检测它是否是第一次启动应用程序？ 仅当它不是第一次打开应用程序时，才返回">AppNavigator"，否则返回所有内容。 这是我的示例代码： 如何将异步存储示例与我的代码一起使用？

///////// AsyncStorage/////////////
async componentDidMount() {
const firstTime = await AsyncStorage.getItem("isFirstTime")
if(firstTime != null) {
// It is not first time use
} else {
// It is first time
await AsyncStorage.setItem("isFirstTime", 'true')
}
}

///////////////  My code  //////////////
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
azureLoginObject: {},
loginSuccess: false,
};
this.azureInstance = new AzureInstance(credentials);
this._onLoginSuccess = this._onLoginSuccess.bind(this);
}
_onLoginSuccess() {
this.azureInstance
.getUserInfo()
.then((result) => {
this.setState({
loginSuccess: true,
azureLoginObject: result,
});
console.log(result);
//HERE EXAMPLE FOR STORE SOME VARIABLE INTO MY REDUX STORE
store.dispatch(userPrincipalName(result.userPrincipalName));
store.dispatch(givenName(result.mobilePhone));
})
.catch((err) => {
console.log(err);
});
}
render() {
if (!this.state.loginSuccess) {
return (
<Provider store={store}>
<AzureLoginView
azureInstance={this.azureInstance}
loadingMessage="Requesting access token"
onSuccess={this._onLoginSuccess}
/>
</Provider>
);
}
const { userPrincipalName, givenName } = this.state.azureLoginObject;
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
}
}

Answer 1

您可以使用asyncStorage：

async componentDidMount() {
const firstTime = await AsyncStorage.getItem("isFirstTime")
if(firstTime != null) {
// It is not first time use
} else {
// It is first time
await AsyncStorage.setItem("isFirstTime", 'true')
}
}

Answer 2

根据另一个答案，您将必须使用 Asyn 存储来检查 Componentdidmount 上的值，如果不存在，则设置该值。

此外，逻辑的其余部分也必须稍作更改。 在这里，我们显示活动指示器，直到检查完成，之后您可以做任何您想做的事情。 我无法测试此代码，因为它具有依赖项，但是我放置了一些内联注释，以便您可以进行适当的更改。

import { ActivityIndicator } from "react-native";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
azureLoginObject: {},
loginSuccess: false,
loading: true
};
}
async componentDidMount() {
const firstTime = await AsyncStorage.getItem("isFirstTime")
if (firstTime != null) {
this.setState({ loading: false });
//Place this based on your logic
this.azureInstance = new AzureInstance(credentials);
this._onLoginSuccess = this._onLoginSuccess.bind(this);
} else {
// It is first time
await AsyncStorage.setItem("isFirstTime", 'true');
this.setState({ loading: false })
}
}
_onLoginSuccess() {
this.azureInstance
.getUserInfo()
.then((result) => {
this.setState({
loginSuccess: true,
azureLoginObject: result,
});
console.log(result);
//HERE EXAMPLE FOR STORE SOME VARIABLE INTO MY REDUX STORE
store.dispatch(userPrincipalName(result.userPrincipalName));
store.dispatch(givenName(result.mobilePhone));
})
.catch((err) => {
console.log(err);
});
}
render() {
//Show activity indicator until async storage check is done
if (this.state.loading)
return <ActivityIndicator />;
if (!this.state.loginSuccess) {
return (
<Provider store={store}>
<AzureLoginView
azureInstance={this.azureInstance}
loadingMessage="Requesting access token"
onSuccess={this._onLoginSuccess}
/>
</Provider>
);
}
const { userPrincipalName, givenName } = this.state.azureLoginObject;
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
}
}