react-native-iphone-screen-helper

一款助您为刘海屏和灵动岛设计的 iPhone 适配 React Native 应用的库。

我分叉此项目以继续开发。
本项目基于 https://www.npmjs.com/package/react-native-iphone-x-helper 派生。
原仓库已不再维护。

项目将在此仓库持续更新。react-native-iphone-screen-helper 完全兼容原功能。
如需支持本项目，欢迎联系我或提交包含新特性的 Pull Request。

安装

yarn add react-native-iphone-screen-helper

或

npm i react-native-iphone-screen-helper --save

API

ifIphoneX(iphoneX样式, [常规样式])

此方法专为 iPhone X 及后续刘海屏/灵动岛机型创建样式表而设计。

参数

iphoneX样式 - 应用于 iPhone X 或更新款刘海屏/灵动岛机型的样式

常规样式 (可选) - 应用于非 iPhone X 机型的样式

示例

// in style.js

import { StyleSheet } from 'react-native';
import { ifIphoneX } from 'react-native-iphone-screen-helper'

export default StyleSheet.create({
    header:{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        padding:10,
        height: 60,
        backgroundColor: 'transparent',
        ...ifIphoneX({
            paddingTop: 50
        }, {
            paddingTop: 20
        })
    },
});

isIphoneX()

返回值 - 如果当前运行设备为 iPhone X 或更新款带有刘海屏或动态岛设计的机型，则返回 true。

示例

import { isIphoneX } from 'react-native-iphone-screen-helper'

// ...

if (isIphoneX()) {
    // do this...
} else {
    // do that...
}

getStatusBarHeight()

返回值 - 状态栏高度：

• 59 适用于 iPhone 14 Pro、14 Pro Max、15、15 Plus、15 Pro、15 Pro Max（安全区域）
• 50 适用于 iPhone 12 Mini、13 Mini（安全区域）
• 47 适用于 iPhone 12、12 Pro、12 Pro Max、13、13 Pro、13 Pro Max、14、14 Plus（安全区域）
• 44 适用于 iPhone X、Xs、Xs Max、11 Pro、11 Pro Max（安全区域）
• 48 适用于 iPhone Xr、11（安全区域）
• 20 适用于其他设备
• StatusBar.currentHeight 适用于 Android 设备

示例

// in style.js

import { StyleSheet } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-screen-helper'

export default StyleSheet.create({
    header:{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        padding:10,
        height: 60,
        backgroundColor: 'transparent',
        paddingTop: getStatusBarHeight()
    },
});

获取底部安全区域高度

返回值 - 适配安全区域的底部高度：带刘海屏或灵动岛的 iPhone X 及以上机型返回 34，其他设备返回 0。

示例

// in style.js

import { StyleSheet } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-screen-helper'

export default StyleSheet.create({
  totalview: {
    flex: 1,
    backgroundColor: 'transparent',
    marginBottom: getBottomSpace()
  },
});

许可证

MIT开源协议