如何在退出并重新打开应用程序后重新渲染页面？

Question

这似乎是一个愚蠢的问题，但我没有在SO中找到一个。

这是：

我有一个反应本机应用程序。每次我退出应用程序并重新打开它时，我希望将主页作为显示的默认屏幕，并重新渲染主页，因为主屏幕内的

componentDidMount

将从数据库中获取最新数据。我们怎样才能实现这样的情况呢？谢谢！

Answer 1

如果您的意思不是关闭应用程序，而是只是将其发送到后台，则可以使用导出的

AppState

对象来检测它。有关示例，请参阅此问题的答案。一旦检测到事件，您可以使用

forceUpdate()

来强制重新渲染类组件，或者在功能组件中使用虚拟钩子

稍微修改了 React 文档示例：

import React, {Component} from 'react';
import {AppState, Text} from 'react-native';

class AppStateExample extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('App has come to the foreground!');
      this.forceUpdate();
    }
    this.setState({appState: nextAppState});
  };

  render() {
    return <Text>Current state is: {this.state.appState}</Text>;
  }
}

功能组件（未经测试）：

import React, { useState, useEffect } from 'react';
import { AppState } from 'react-native';

const App = () => {
  const [updateVal, setUpdateVal] = useState(false);
  const forceUpdate = newState => {
    if (newState === 'active')
      setUpdateVal(!updateVal); // forces a rerender
  }
  useEffect(() => {
    AppState.addEventListener('change', forceUpdate);
    return () => AppState.removeEventListener('change', forceUpdate);
  }, []);
  // return your contents
};

但是，如果您实际上关闭它（不仅仅是离开应用程序），它应该重新渲染。

Answer 2

应用程序有一个不同的“退出”概念，这可能不直观。 如果您关闭应用程序，它仍然在后台打开，这就是为什么您的应用程序在您下次打开它时不会从头开始启动。

要处理这种情况，您需要监视活动，并且不能像在浏览器应用程序中那样依赖 React 生命周期事件。

例如，如果您使用 React-navigation，您可以使用它们的生命周期事件：https://reactnavigation.org/docs/en/navigation-lifecycle.html

其中包括诸如

willFocus, willBlur, didFocus and didBlur

之类的内容。 然后，根据这些事件，您可以运行所需的任何代码，例如更新某些状态或获取新数据。

Answer 3

2024年，使用expo和@react-navigation，我这样处理：

  import { useFocusEffect } from "@react-navigation/native";
  import { AppState } from "react-native";
  import React, { useState } from "react";

  ...

  const [isLoading, setLoading] = useState(false);
  const [schedule, setSchedule] = useState();

  const fetchSchedule = React.useCallback(
    (nextAppState = "active") => {
      async function fetch() {
        if (nextAppState === "active") {
          setLoading(true);
          try {
            const data = await getSchedule(teacherIdBw, scheduleDate);
            setSchedule(data.schedule);
          } catch (error) {
            console.log({ error });
            // further error handling
          }
          setLoading(false);
        }
      }

      fetch();
    },
    [teacherIdBw]
  );

  // fetch data once when we visit this page
  useFocusEffect(fetchSchedule);

  // fetch when we return to this page after being in background
  useFocusEffect(
    React.useCallback(() => {
      const subscription = AppState.addEventListener("change", fetchSchedule);
      return () => {
        subscription.remove();
      };
    }, [])
  );

请阅读https://reactnative.dev/docs/appstate和https://reactnavigation.org/docs/use-focus-effect/了解详情