时间戳

首页 > 解决方案 > 如何使用钩子检测反应原生应用程序的首次启动？

react-native - 如何使用钩子检测反应原生应用程序的首次启动？

问题描述

我正在尝试在 react native 中编写一个仅在首次下载应用程序时显示的屏幕，并且我找到了一些显示我正在尝试做的事情的参考代码，但我不确定如何使用 react hooks 来实现它他们在这里使用的类组件样式。我还发现 componentWillMount() 已被弃用，所以我想弄清楚用哪个钩子来替换它？

请注意，checkIfFirstLaunch 是我编写的一个函数，用于检查应用程序是否是第一次启动。我基本上需要帮助把它变成一个功能组件。

import React from 'react';
import { Text } from 'react-native';
import checkIfFirstLaunch from './utils/checkIfFirstLaunch';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isFirstLaunch: false,
      hasCheckedAsyncStorage: false,
    };
  }

  async componentWillMount() {
    const isFirstLaunch = await checkIfFirstLaunch();
    this.setState({ isFirstLaunch, hasCheckedAsyncStorage: true });
  }

  render() {
    const { hasCheckedAsyncStorage, isFirstLaunch } = this.state;

    if (!hasCheckedAsyncStorage) {
      return null;
    }

    return isFirstLaunch ?
      <Text>This is the first launch</Text> :
      <Text>Has launched before</Text>
    ;
  }
}

标签： react-nativeasynchronous

解决方案

您可以使用useEffect做与 componentDidMount 相同的工作（componentWillMount 已弃用且不存在于功能组件中）

在您的测试未执行时返回 null，然后检查您的布尔值

import React, { useEffect, useState } from 'react';
import { Text } from 'react-native';
import checkIfFirstLaunch from './utils/checkIfFirstLaunch';

const App = () => {
    const [isFirstLaunch, setIsFirstLaunch] = useState(null)

    useEffect(() => {
        checkIfFirstLaunch().then((isFirstLaunch) => {
            setIsFirstLaunch(isFirstLaunch)
        });
    }, [])

    if (isFirstLaunch === null) return null

    return isFirstLaunch ?
      <Text>This is the first launch</Text> :
      <Text>Has launched before</Text>
    ;
}

export default App

推荐阅读