如何在React中检测和渲染设备类型

有相当多的原因，开发人员可能想检查用户是在哪种设备上查看网站的。其一，我们有响应式设计，这有助于我们在各种设备上创建一致的、有凝聚力的页面。

另一个很好的理由是在不同的设备上呈现不同的内容。这方面的一个很好的例子是Git下载页面。

该页面运行一个脚本，自动判断用户使用什么操作系统来浏览该页面。

根据这些信息，会出现一个相关的版本，比如当用户使用Windows电脑时，会显示 "Download for Windows"，当用户使用Mac电脑时，会显示 "Download on MacOS"。

我们检测设备类型的项目非常相似。我们将建立的页面有一个按钮，根据用户代理的操作系统在按钮上显示不同的文字。

本教程包括以下内容。

• 如何创建一个React应用并定义组件
• 如何使用mobile-detect 库
• 如何检测客户端用户设备/操作系统并相应地渲染内容

如果你打算一起编码，你可以按照这个文档（README.md）来学习如何在你的本地机器上设置这个项目。

让我们深入了解一下。

了解用户代理字符串

每当客户端（网络浏览器）向网络服务器发出网页请求时，有关该请求的信息就会在HTTP头内发送过来，例如用户代理。

用户代理持有一串信息，用于识别请求页面的浏览器、它所运行的操作系统，甚至设备的名称。所有这些信息都是作为用户代理字符串的一部分。

利用用户代理字符串

在其原始形式下，用户代理字符串不是很有帮助。为了理解用户代理字符串，并随后利用它来推断关于客户端的信息，我们必须对它进行解析。

为了做到这一点，我们从字符串中解构独立的信息，这取决于我们正在寻找的东西。值得庆幸的是，有一个非常有用的JavaScript库，可以帮助我们实现这一目标。

什么是mobile-detect.js ？

[Mobile-detect.js](https://www.npmjs.com/package/mobile-detect) 是一个设备检测JavaScript库，帮助开发人员确定用户的操作系统。有了这些信息，我们就可以为每个检测到的系统选择渲染什么样的内容。

对于我们的应用程序，我们将创建一个非常简单的下载页面，名为 "Kingo"。这个页面上的下载按钮将根据用户的操作系统显示以下文字。

• "在安卓上下载"，如果用户是从安卓设备上查看的
• "在iOS上下载"，如果用户是从苹果移动设备上查看的话
• "在黑莓上下载"，如果用户是从黑莓设备上查看的话
• "在Windows上下载"，如果用户从Windows电脑上查看的话
• "在MacOS上下载"，如果用户是从Macintosh电脑上查看的。

首先，让我们运行以下命令。

npx create-react-app kingo

该命令在当前目录下创建了一个名为kingo 的文件夹，并为我们安装了依赖项。 [create-react-app](https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/) 自动为我们处理配置问题。

在创建我们的项目文件夹后，让我们开始创建我们的组件。我们的React应用程序将只由两个组件组成。

• App.js, 父组件
• button.js, 按钮组件

但在我们开始定义我们的组件之前，我们必须先处理我们的模板文件，index.html 。

通过CDN使用mobile-detect.js

在我们的项目中，有多种方式可以使用mobile-detect.js 。然而，最简单的方法是通过内容交付网络（CDN）来访问它。

要做到这一点，请导航到kingo/public/index.html ，并将以下链接标签粘贴到index.html 文件中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.5/mobile-detect.min.js"></script>

有了这个脚本，我们现在可以在我们的React应用中使用移动检测。

创建我们的React根组件

接下来，让我们创建我们的React根组件，app.js 。进入kingo/src/App.js.

我们必须首先导入React库，因为我们正在创建一个React组件、app.css 和button.js 组件（未定义）以及英雄图像。

import React from 'react';
import './App.css';
import Button from './components/Button';
import image from './5.jpg'

function App() {
  return (
    <div className="App">
      <div className="hero">
        <img src={image} alt="Kingo" />
      </div>
      <div className="text">
        <h1>Kingo App</h1>
        <p>Download the kingo app and to get up-to-date super features for free. Available for all devices.</p>
        <Button />
      </div>
    </div>
  );
}

export default App;

我们的应用程序的视图被分为两个部分。第一个div,hero, 保存英雄图像，第二个div,text, 保存英雄文本以及按钮组件。稍后在我们的样式表中，我们将使用Flexbox将它们排列在一起。

创建我们的按钮组件

这是第二个也是最后一个组件。进入kingo/src/components/Button.js ，在button.js ，我们定义一个简单的输入元素，有一个class 和一个唯一的id 。我们还必须设置一个临时的value ，即Download on your device 。

import React from 'react';

function Button() {
  return (
    <input type="button" id="button" value="Download on your device" />
  )
}

export default Button

稍后，我们将根据用户在什么设备上查看我们的React应用程序，用其他变化来覆盖这个value 。

塑造页面风格

要设计我们的页面，进入kingo/src/App.css ，添加以下内容。

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  background-color: black;
  color: white;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "roboto",sans-serif;
}

.App {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 70px auto;
  max-width: 1000px;
  padding: 30px;
}

h1 {
  font-size: 50px;
}

p {
  font-size: 25px;
}

img {
  height: 300px;
  width: 300px;
}

input {
  border: 2px solid brown;
  background: none;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 19px;
  border-radius: 7px;
}

.text {
  padding: 0 40px;
}

@media(max-width: 768px) {
  .App {
    display: flex;
    flex-direction: column;
    padding: 30px;
  }

  img {
    height: 400px;
    width: 400px;
  }
}

检测设备MobileDetect

这里的目标很简单：我们想根据用户的设备在下载按钮上显示不同的文本。

为了实现这一目标，我们必须在public 文件夹中创建一个自定义脚本，称为script.js 。因此，进入kingo/public ，创建一个名为script.js 的新文件。

接下来，编写检测设备的代码。这段代码放在kingo/public/script.js 。

function detectDevice() {
let type = new MobileDetect(window.navigator.userAgent)
let button = document.getElementById("button")


  if (type.os() === "iOS") {
    button.value = "Download for iOS";
  } else if (type.os() === "AndroidOS") {
    button.value = "Download for Android";
  } else if (type.os() === "BlackBerryOS") {
    button.value = "Download for Blackberry";
  } else if (type.os() === "WindowsOS") {
    button.value = "Download for Windows";
  } else if (type.os() === "MacOS") {
    button.value = "Download for Mac";
  } else {
    button.value = "Download on your device";
  }

}

window.addEventListener("load", detectDevice);

让我们把这段代码分解一下。

首先，我们初始化MobileDetect() 对象，并将windows 对象中的userAgent 属性作为一个参数传入。

这样，脚本就可以访问查看我们页面的客户端设备的用户代理数据。我们还可以从DOM中访问具有id 值的button 的input 元素，并将输入的内容传递到一个变量中。

接下来，执行一个嵌套的if 语句，使用os() 方法检查用户的操作系统。根据结果，我们可以使用textContent 属性为按钮指定不同的值。

查看结果

Chrome网络浏览器有一个内置功能，叫做Chrome DevTool；所有的网络浏览器都有一个。

对于Chrome浏览器，我们只需要通过点击键盘上的F12或点击右上角的三个点，然后选择更多工具，再选择开发工具，就可以切换到开发工具。

要模拟一个设备，我们必须首先切换设备工具条。

Chrome DevTool会显示一个我们可以模拟的设备列表。我们可以从上面的下拉菜单中选择设备，根据我们选择的设备，我们应用程序中的按钮会显示不同的下载文本。

如果模拟的是安卓设备，在重新加载时就会出现一个新的页面，并且按钮会显示不同的值。

如果模拟的是苹果设备，则会出现不同的对应文本。

黑莓设备的体验也一样。

这同样适用于Windows、MacOS和任何其他指定的操作系统。

总结

在本教程中，我们探讨了如何检测用户在什么设备上查看应用程序页面，以及如何相应地渲染内容。使用mobile-detect 库中的os() 方法，我们解析了一个用户代理字符串来检索我们需要的信息。

谢谢你的关注。本教程的源代码可以从这个GitHub资源库中获得。

祝你有一个愉快的一周!

The postHow to detect and render device types in Reactappeared first onLogRocket Blog.