Question

我正在尝试编写一个仅在首次下载应用程序时显示的，以react native编写的屏幕，并且我找到了一些参考代码来显示我正在尝试执行的操作，但是我不确定如何使用react钩子而不是它们在此处使用的类组件样式。我还发现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>
    ;
  }
}

Answer 1

您可以使用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

如何使用钩子检测React Native应用的首次启动？

1 个答案: