如何知道 React Native App 是否进入后台？

有时我们都会质疑——是否有可能知道 React Native 应用程序是否已进入后台？是否有任何可以捕获的回调或事件？答案是 应用状态 .作为奖励，我们将介绍添加安全屏幕以响应本机应用程序。

在本文中，我们将通过 应用状态 API 并实现一个具有安全屏幕的场景，该屏幕将在应用程序之间切换和应用程序处于前台时显示。

应用状态

这个 API 帮助我们了解应用程序的状态，如果应用程序是 ** 积极的** , ** 不活跃，** 或在 ** 背景** .

此 API 可用于多种用例：

换句话说，您在切换应用程序时想要执行的任何事件 ** 活跃到前台** 或者 ** 前景到背景** 或者 ** 活动背景** .任何情况都可以使用 AppState API 处理。

在后台，AppState API 使用本机功能来触发这些事件，例如它使用的 iOS 生命周期事件并且这些事件可以是基于场景或基于应用程序的。

要实现 AppState，我们只需要从 React Native 导入它并添加一个 ** 改变** 事件监听器。该事件侦听器将提供“应用程序的下一个/即将到来的状态是什么”的值。使用它我们可以触发一些关于状态变化的代码。

应用状态可见 保存应用程序当前状态的值。我们只能看到 ** 积极的** 状态。但是事件既可以在后台触发，也可以在前台触发（因为 appState 间接使用了原生生命周期事件）。

安全屏幕是一种空白屏幕，当我们在应用程序上不活动时会出现（换句话说，当我们不使用应用程序时会出现空白/空白屏幕）。

Security screen

在上面的视频中，您将看到应用程序是否进入前台（在切换应用程序时）然后会出现一个空白屏幕。如果向下滚动通知部分，在这种情况下，您也会看到一个空白屏幕。 ** 当我们不在应用程序上时，它是保护我们的数据/视图的安全屏幕** .

创建这个安全屏幕的逻辑与上面的逻辑非常相似，我们只需要添加一个条件来检查当前状态。如果 appState 在 ** 背景** 或者 ** 前景** 状态，那么我们必须显示空白屏幕，如果应用程序是 ** 积极的** , 将主要内容渲染在 应用程序.js

在上面的代码中，您可以将主要内容呈现在 appStateVisible == '活动' 如果您想向安全屏幕添加任何内容，请在 别的 部分。

我们知道如何处理应用程序位于后台或前台的情况。可以有多种场景“应用在后台时如何调用API”、“应用在前台或后台时如何处理推送通知”或“应用在前台时如何显示安全屏幕” .现在我们可以使用 AppState API 轻松处理这些情况。

请继续关注以获得更多使用不同内置 React 本机 API 的方法。

如果你喜欢这个博客，你还会发现以下内容 反应原生 博客有趣且有用。欢迎在评论区提出任何问题

如果你需要一个基础来启动你的下一个 React Native 应用程序，你可以使用 React Native 完整应用

React Native Full App by Enappd

posted @ 2022-09-09 10:02 哈哈哈来了啊啊啊阅读(388) 评论(0) 编辑收藏举报

刷新页面返回顶部