React-Screenfull 是一款 React 的屏幕全屏解决方案，它可以让你的应用程序在任何时候以全屏模式运行。它很容易使用，并且具有不同的API用于控制全屏模式的各种方面。本文将介绍如何使用 npm 包 react-screenfull ，让你快速集成全屏功能到你的 React 应用程序中。
安装
首先，我们需要安装 react-screenfull npm 包。可以使用 npm 或 yarn 安装它。
使用 npm:
npm install react-screenfull --save
使用 yarn:
yarn add react-screenfull
使用
react-screenfull 包中的 Fullscreen 组件会自动处理全屏逻辑。我们只需要将需要全屏的元素包裹在这个组件内部即可。例如，我们可以将整个应用程序包裹在 Fullscreen 组件中，以实现全屏模式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --- - -- -- -
------ -
------------
-----
-- ---
------
-------------
--
--
------ ------- ----API
React-Screenfull 提供了几个 API，可以用来控制全屏模式的各个方面。
onEnter
当用户进入全屏模式时，onEnter 函数将被调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --- - -- -- -
----- ------- - -- -- -
-------------------- ---------- -------
--
------ -
----------- ------------------
-----
-- ---
------
-------------
--
--
------ ------- ----onExit
当用户退出全屏模式时，onExit 函数将被调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --- - -- -- -
----- ------ - -- -- -
------------------- ---------- -------
--
------ -
----------- ----------------
-----
-- ---
------
-------------
--
--
------ ------- ----onCancel
当用户取消全屏模式时，onCancel 函数将被调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --- - -- -- -
----- -------- - -- -- -
---------------------- ---------- -------
--
------ -
----------- --------------------
-----
-- ---
------
-------------
--
--
------ ------- ----onChange
当全屏状态改变时，onChange函数将被调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --- - -- -- -
----- -------- - -------------- -- -
----------------------- ------- ----- --------------
--
------ -
----------- --------------------
-----
-- ---
------
-------------
--
--
------ ------- ----enabled
检查全屏模式是否可用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --- - -- -- -
------ -
------------
-----
---------- ---- ------------------- - ---- - --- ----- ---------
------
-------------
--
--
------ ------- ----示例代码
完整的示例代码（一个可以全屏的视频播放器）如下所示：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
------ - ---------- - ---- -------------------
----- ----------- - -- -- -
----- -------- - -------------
----- --------------------- - -- -- -
-- ------------------ -
------------------------
-
--
----- -------------------- - -- -- -
-- ------------------ -
-------------------------
-
--
------ -
----------- ------------------------------- ------------------------------
------ -------------- ------------------ -------- --
-------------
--
--
------ ------- ------------结论
在本文中，我们已经学习了如何使用 npm 包 react-screenfull 将全屏功能集成到 React 应用程序中。我们介绍了 react-screenfull 提供的几个 API，并给出了一个示例。通过使用 react-screenfull ，我们可以轻松地实现一些需要全屏界面的应用程序，如视频播放器、图片浏览器等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551d581e8991b448cf3e3