作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在 react native
中为 iPhone Xs Max
制作一个具体案例?
这是我为 IphoneX
编写的代码,来自 react-native-iphone-x-helper
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
尺寸就足够了吗?
最佳答案
最后我选择了这个:
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
编辑:如果您希望此函数适用于 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);
或者更简单:
let hasNotch = DeviceInfo.hasNotch();
关于react-native - react native : How to deteck iPhones with Notch?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52519478/
我正在尝试在 react native 中为 iPhone Xs Max 制作一个具体案例? 这是我为 IphoneX 编写的代码,来自 react-native-iphone-x-helper ex
我是一名优秀的程序员,十分优秀!