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

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

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

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

应用状态

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

此 API 可用于多种用例：

1. 处理推送通知
2. 添加安全屏幕。

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

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

第 1 步 — 实现 AppState API

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

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

第 2 步 — 使用 AppState API 实现安全屏幕

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

Security screen

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

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

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

结论

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

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

下一步

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

• 火力基地—— 集成 Firebase | 分析 | 推送通知 | Firebase CRUD
• 如何在 React Native 中使用 — 地理位置 | 生命周期钩子 | 图像选择器 | Redux 实现 | 进行 API 调用 | 导航 | 翻译 | 条码和二维码扫描 | 发送和阅读短信 | 谷歌愿景 | 拉动刷新
• 付款— 苹果支付 | 条纹支付
• 验证 - 谷歌登录 | Facebook登入 | 电话验证 | 推特登录
• 在 React Native 中创建 Instagram / Whatsapp 故事功能
• React Native 生命周期钩子 | 实施 Redux | Redux 的异步操作
• 在 React Native 中创建很棒的应用程序 使用完整的应用程序

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

React Native Full App by Enappd

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/22970/01250910