随着移动设备的普及和多端兼容的需求，开发者们需要考虑到用户不同设备的适配问题。而 react-device-detect 是一个可以帮助开发者检测设备类型的 npm 包，能够方便快速的识别当前设备的类型并做出相应的适配处理。
本篇文章将全面介绍 react-device-detect 的使用方法，让初学者也能够轻松上手。
安装
使用 npm 安装 react-device-detect 。
--- ------- ------------------- ------
如果你的项目使用的是 yarn ，可以使用下面的命令安装。
---- --- -------------------
使用
安装完成后，我们就可以在项目中引用 react-device-detect 了。
------ - ------------ ---------- - ---- ---------------------
react-device-detect 提供了 BrowserView 和 MobileView 两个组件，分别对应着浏览器和移动端。
浏览器端适配
我们可以使用 BrowserView 组件来对 PC 端进行适配。
------ - ----------- - ---- ----------------------
-------- ----- -
------ -
-----
-------------
------ --------
--------------
------
--
-在上面的代码中，我们使用了 BrowserView 组件，它将自动检测当前设备是否是 PC 端，并且在 PC 端渲染 <h1> 标签。
移动端适配
同样的道理，我们也可以使用 MobileView 组件来对移动端进行适配。
------ - ---------- - ---- ----------------------
-------- ----- -
------ -
-----
------------
--------------
-------------
------
--
-在上面的代码中，我们使用了 MobileView 组件，它将自动检测当前设备是否是移动端，并且在移动端渲染 <h1> 标签。
更多用法
判定设备类型
我们可以使用 isMobile 属性和 isBrowser 属性来判断当前设备类型。
------ - --------- --------- - ---- ----------------------
-------- ----- -
------ -
-----
-
-------- -
-------------- -
------ --------
-
------
--
-上面代码中，根据当前设备的类型来选择渲染不同的 <h1> 标签。
更多检测属性
react-device-detect 还提供了其它属性，可以帮助我们更方便地检测当前设备的属性，如：isTablet ， isSmartTV ， isConsole 和 isWearable 等。
------ -
---------
----------
---------
----------
----------
----------
- ---- ----------------------
-------- ----- -
------ -
-----
-
-------- -
-------------- -
------ --------
-
-
-------- -
------------- -
----
-
-
--------- -
------------- -
----
-
-
--------- -
-------------- -
----
-
-
---------- -
-------------- -
----
-
------
--
-总结
react-device-detect 使得设备类型判断变得非常简单，不需要编写冗长的代码，而且还支持更多的设备类型属性，方便开发者进行更多适配操作。希望本篇文章的介绍能够帮助到大家，让你更加轻松地进行移动设备适配。
完整代码示例：
------ ----- ---- --------
------ - --------- ---------- --------- ---------- ---------- ---------- - ---- ----------------------
-------- ----- -
------ -
-----
-
-------- -
-------------- -
------ --------
-
-
-------- -
------------- -
----
-
-
--------- -
------------- -
----
-
-
--------- -
-------------- -
----
-
-
---------- -
-------------- -
----
-
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-react-device-detect