Question

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

在这里：

我有一个React Native应用。每次退出应用程序并重新打开它时，我都希望显示主页作为默认屏幕，并希望重新渲染该主页，因为在主页屏幕中，componentDidMount将从数据库中获取最新数据。我们如何实现这种情况？谢谢！

Answer 1

如果不是要关闭应用程序而只是将其发送到后台，则可以使用导出的AppState对象进行检测。有关示例，请参见this question的答案。一旦检测到事件，就可以对类组件使用const storage = multer.diskStorage({ destination: './public/uploads', filename: (req, file, cb) => { cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) } }) const upload = multer({ storage: storage, limits: {fileSize: 1000000} }).single('myImage') app.options('/upload', (req, res) => { upload(req, res, (err) => { if (err) { res.status(400).json({message: err}) } else { console.log(req.file) } }) })或在功能组件中使用虚拟钩子来强制重新渲染

稍微修改过的React docs示例：

forceUpdate()

功能组件（未试用）：

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

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

Answer 2

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

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

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

其中包括willFocus, willBlur, didFocus and didBlur之类的内容。然后，基于这些事件，您可以运行所需的任何代码，例如更新某些状态或获取新数据。

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

2 个答案: