React Native ：如何用Notch检测iPhone？

sigwle7e 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(293)

我试图在react native中为iPhone Xs Max做一个具体的案例？
这是我从react-native-iphone-x-helper得到的IphoneX的代码

export function isIphoneX() {
    let dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (dimen.height === 812 || dimen.width === 812)
    );
}

iPhone Xs Max的维数是多少？仅仅加上iPhone Xs Max的维数是否足够？

react-native

来源：https://stackoverflow.com/questions/52519478/react-native-how-to-deteck-iphones-with-notch

2条答案

按热度按时间

a6b3iqyw1#

最后我还是这样说：

export function isIphoneXorAbove() {
      const dimen = Dimensions.get('window');
      return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        ((dimen.height === 812 || dimen.width === 812) || (dimen.height === 896 || dimen.width === 896))
      );
    }

但所有的功劳都要归功于这个PR

**EDIT：**如果您希望此功能适用于iPhone 11和iPhone 12版本，您可以改用此功能：

function isIphoneWithNotch() {
  const dimen = Dimensions.get('window');
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTV &&
    (dimen.height === 780 ||
      dimen.width === 780 ||
      dimen.height === 812 ||
      dimen.width === 812 ||
      dimen.height === 844 ||
      dimen.width === 844 ||
      dimen.height === 896 ||
      dimen.width === 896 ||
      dimen.height === 926 ||
      dimen.width === 926)
  );
}

**编辑2：**最后，我使用react-native-device-info采用了更简洁的方法

const deviceId = DeviceInfo.getDeviceId();
const iphonesWithNotch = [
  'iPhone10,3',
  'iPhone11,2',
  'iPhone11,4',
  'iPhone11,6',
  'iPhone11,8',
  'iPhone12,1',
  'iPhone12,3',
  'iPhone12,5',
  'iPhone12,8',
  'iPhone13,1',
  'iPhone13,2',
  'iPhone13,3',
  'iPhone13,4',
  'iPhone14,2',
  'iPhone14,3',
  'iPhone14,4',
  'iPhone14,5',
  'iPhone14,6',
  'iPhone14,7',
  'iPhone14,8',
];

const isIphoneWithNotch = iphonesWithNotch.includes(deviceId);

或者更简单：