📌  相关文章
📜  如何在 React Native 中查看平台和设备详细信息?

📅  最后修改于: 2022-05-13 01:56:41.134000             🧑  作者: Mango

如何在 React Native 中查看平台和设备详细信息?

React Native 是由 Meta Platforms, Inc 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS、macOS、tvOS、Web、Windows 和 UWP 的应用程序,使开发人员能够同时使用 React 框架具有本机平台功能。

在本文中,我们将学习如何在 React Native 中检查平台和设备详细信息

创建 React Native 应用程序:

第 1 步:我们将使用 expo 创建 React Native 应用程序。在终端中使用以下命令安装 expo-cli。

npm install -g expo-cli

第 2 步:使用 expo 创建一个 React Native 项目。

expo init "gfg"

第 3 步:现在使用以下命令转到创建的项目。

cd "gfg"

项目结构:它将如下所示:

检查操作系统和版本:我们可以轻松检查用户正在使用的设备的操作系统和版本。为此,我们将使用 react-native 的 Platform API。

示例:App.js文件中添加以下代码。

Javascript
import React from "react";
import { Platform, View, Text } from "react-native";
  
const GfGApp = () => {
  
    return (
        
            
                GeeksforGeeks React Native Platform
            
                OS:- {Platform.OS}
            
                Version:- {Platform.Version}
        
    );
};
  
export default GfGApp;


Javascript
import React from "react";
import { Platform, View, Text } from "react-native";
  
const GfGApp = () => {
  
    return (
        
            
                GeeksforGeeks React Native Platform
            
            
                Constants:- {JSON.stringify(Platform.constants, null, 2)}
            
        
    );
};
  
export default GfGApp;


运行应用程序:现在在终端中使用以下命令运行应用程序。

npm run web

输出:

查看设备信息:我们可以轻松查看用户正在使用的设备信息。为此,我们将使用 react-native 的 Platform API。

示例:App.js文件中添加以下代码。

Javascript

import React from "react";
import { Platform, View, Text } from "react-native";
  
const GfGApp = () => {
  
    return (
        
            
                GeeksforGeeks React Native Platform
            
            
                Constants:- {JSON.stringify(Platform.constants, null, 2)}
            
        
    );
};
  
export default GfGApp;

运行应用程序:现在在终端中使用以下命令运行应用程序。

npm run web

输出: