如何在React Native中不依赖第三方包获取设备类型（手机/平板/桌面）

如果不想依赖第三方库，你可以结合React Native现有API做基础判断，或者通过自定义原生模块实现更精准的设备类型识别，以下是具体方案：

一、React Native 原生API快速判断 #

不用写原生代码的话，可通过现有API组合判断：

• 桌面设备：直接检查Platform.OS是否为'macos'或'windows'
• iOS设备：用Platform.isPad区分平板，其余默认是手机
• Android设备：读取Platform.constants.uiMode，若值为'tablet'则判定为平板，否则为手机

不过这种方式对特殊设备（比如折叠屏、iPadOS桌面模式）的判断可能不够精准，需要原生实现来补全。

二、Android原生实现（Kotlin） #

1. 创建原生模块 #

在你的Android项目app/src/main/java/com/[你的包名]/下新建DeviceTypeModule.kt：

package com.yourappname

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import android.content.res.Configuration

class DeviceTypeModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName(): String = "DeviceTypeModule"

    @ReactMethod
    fun getDeviceType(callback: (String) -> Unit) {
        val config = reactApplicationContext.resources.configuration
        val deviceType = when {
            // 最小屏幕宽度≥600dp 判定为平板（Android官方标准）
            config.smallestScreenWidthDp >= 600 -> "tablet"
            // 桌面模式
            config.uiMode and Configuration.UI_MODE_TYPE_MASK == Configuration.UI_MODE_TYPE_DESK -> "desktop"
            else -> "mobile"
        }
        callback.invoke(deviceType)
    }
}

2. 注册模块 #

新建DeviceTypePackage.kt：

package com.yourappname

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
import java.util.ArrayList

class DeviceTypePackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        val modules = ArrayList<NativeModule>()
        modules.add(DeviceTypeModule(reactContext))
        return modules
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> = emptyList()
}

然后在MainApplication.kt的getPackages方法中添加这个包：

override fun getPackages(): List<ReactPackage> {
    return PackageList(this).packages.apply {
        add(DeviceTypePackage())
    }
}

三、iOS原生实现（Swift） #

1. 创建原生模块 #

在iOS项目中新建DeviceTypeModule.swift：

import Foundation
import React

@objc(DeviceTypeModule)
class DeviceTypeModule: NSObject, RCTBridgeModule {
    static func moduleName() -> String! {
        return "DeviceTypeModule"
    }

    static func requiresMainQueueSetup() -> Bool {
        return true
    }

    @objc func getDeviceType(_ callback: RCTResponseSenderBlock) {
        var deviceType = "mobile"
        switch UIDevice.current.userInterfaceIdiom {
        case .pad:
            deviceType = "tablet"
        case .mac:
            deviceType = "desktop"
        default:
            break
        }
        callback([deviceType])
    }
}

2. 注册模块 #

如果是Swift项目，确保模块被RN识别：

• 若存在桥接文件（[项目名]-Bridging-Header.h），无需额外操作；
• 若没有桥接文件，需要在Xcode中添加，并确保DeviceTypeModule被正确导入。

四、React Native端调用 #

创建工具函数deviceUtils.js：

import { NativeModules } from 'react-native';

const { DeviceTypeModule } = NativeModules;

export const getDeviceType = () => {
    return new Promise((resolve) => {
        DeviceTypeModule.getDeviceType((type) => {
            resolve(type); // 返回值：'mobile' | 'tablet' | 'desktop'
        });
    });
};

在组件中使用：

import { getDeviceType } from './deviceUtils';

// 示例：在组件挂载时获取设备类型
useEffect(() => {
    const fetchType = async () => {
        const type = await getDeviceType();
        console.log('设备类型:', type);
        // 这里可以根据类型做对应逻辑处理
    };
    fetchType();
}, []);

内容的提问来源于stack exchange，提问作者Karan Rampal