如何修改 SafeAreaView 中的填充？

Question

我试图将元素定位在屏幕的左上角（周围有一些边距）。由于 iPhone XI 上的缺口，我使用的是 SafeAreaView。不幸的是，SafeAreaView 的填充量很大，它超出了状态栏/缺口区域。因此，应该在视觉上位于角落的元素现在比其他设备上的要低得多。

我查看了 StatusBar.currentHeight，但仅支持 Android。另一种选择是使用具有参数的https://github.com/react-native-community/react-native-safe-area-viewforceInset。不幸的是，将它设置为 { top: xx } 使它像普通视图一样工作，所有设备（也包括没有缺口的设备）都有顶部填充。

我怎么能有一个 SafeAreaView 但有一个修改过的顶部填充？

Answer 1

几个月前我遇到了类似的问题，所以我写了一个 util 来为我提供顶部/底部SafeArea的正确高度，以作为填充添加到普通的 react-native View，然后通过添加/删除更多填充来使用它们。这是代码：

import { Dimensions, Platform } from 'react-native'

export function isIphoneX () {
  const iphoneXLength = 812
  const iphoneXSMaxLength = 896
  const windowDimensions = Dimensions.get('window')
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (windowDimensions.width === iphoneXLength ||
      windowDimensions.height === iphoneXLength ||
      windowDimensions.width === iphoneXSMaxLength ||
      windowDimensions.height === iphoneXSMaxLength)
  )
}

const DimensionsStyle = {
  safeAreaTopHeight: Platform.OS === 'ios' ? (isIphoneX() ? 44 : 20) : 0,
  safeAreaBottomHeight: Platform.OS === 'ios' && isIphoneX() ? 35 : 0,
  tabBarHeight: Platform.OS === 'ios' ? 17 : 20,
  bottomAreaHeight: Platform.OS === 'ios' && isIphoneX() ? 34 : 0
}

export default DimensionsStyle

此代码有效，因为我们知道 iPhone X 和 iPhone XS 的高度为812p，而 iPhone XSMax 和 XR 的高度为896p。

然后您可以简单地将此实用程序导入您的视图并像这样使用它：

import Dimension from '../../../utils/DimensionUtils' // path of the util
//
// rest of the code
//
const styles = StyleSheet.create({
  container: {
    paddingTop: Dimension.safeAreaTopHeight // here you can edit the height of the safeare :))
  }
})