React Native：如何检测搭载灵动岛（Dynamic Island）的机型？

可以通过设备型号匹配或原生桥接硬件特征检测两种方式精准定位，以下是具体实现方案：

方案一：硬编码设备型号（精准直接） #

灵动岛仅搭载在iPhone 14 Pro（内部型号iPhone15,2）和iPhone 14 Pro Max（内部型号iPhone15,3）上，借助react-native-device-info库获取设备型号后直接匹配即可。

步骤： #

1. 安装依赖

npm install react-native-device-info --save
# 或 yarn add react-native-device-info

2. 编写判断逻辑

import DeviceInfo from 'react-native-device-info';

const hasDynamicIsland = () => {
  const deviceModel = DeviceInfo.getModel();
  // 仅匹配灵动岛专属设备型号
  return ['iPhone15,2', 'iPhone15,3'].includes(deviceModel);
};

优势：判断逻辑简单、精准；不足：若后续苹果推出新的灵动岛机型，需手动更新型号列表。

方案二：原生桥接检测硬件特征（扩展性强） #

如果不想硬编码型号，可通过iOS原生代码检测设备硬件特征，再暴露给React Native调用。核心思路是：灵动岛仅存在于iOS16+的特定尺寸iPhone上，结合系统版本、屏幕分辨率双重判断。

iOS原生代码示例（Swift）： #

import UIKit
import React

@objc(DynamicIslandDetector)
class DynamicIslandDetector: NSObject, RCTBridgeModule {
  static func moduleName() -> String! {
    return "DynamicIslandDetector"
  }
  
  static func requiresMainQueueSetup() -> Bool {
    return true
  }
  
  @objc func hasDynamicIsland(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) -> Void {
    guard #available(iOS 16.0, *), UIDevice.current.userInterfaceIdiom == .phone else {
      resolve(false)
      return
    }
    // iPhone14 Pro原生分辨率高度：2556；Pro Max：2796
    let screenHeight = UIScreen.main.nativeBounds.height
    resolve([2556, 2796].contains(screenHeight))
  }
}

React Native端调用： #

import { NativeModules } from 'react-native';

const { DynamicIslandDetector } = NativeModules;

const checkDynamicIsland = async () => {
  try {
    const result = await DynamicIslandDetector.hasDynamicIsland();
    return result;
  } catch (error) {
    console.error(error);
    return false;
  }
};

优势：无需关注具体设备型号，后续新灵动岛机型只要分辨率符合即可兼容；不足：需要编写原生代码，增加少量开发成本。

注意事项 #

• 禁止仅通过iOS版本判断：iOS16及以上系统也运行在iPhone13等非灵动岛机型上，会导致误判。
• 若选择型号匹配方案，需及时跟进苹果官方发布的新设备型号列表。

内容的提问来源于stack exchange，提问作者Kevin Amiranoff