react native：有办法检测是否是第一次启动应用程序？

Question

有没有办法检测它是否是第一次启动应用程序？ 仅当不是第一次打开应用程序时，才返回“AppNavigator”，否则返回所有内容。 这是我的示例代码：如何在我的代码中使用 AsyncStorage 示例？

///////// 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 上的值，如果不存在则设置该值。

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

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