4

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

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

我怎样才能拥有 SafeAreaView 但修改了顶部填充？

4

1 回答 1

5

几个月前我遇到了类似的问题，所以我写了一个工具来给我正确的顶部/底部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 :))
  }
})
于 2019-08-29T12:20:14.647 回答