调用/共享热点时是否反应本机检测IOS状态栏高度?

我已经面临了这个挑战,但还没有找到有关stackoverflow/github问题的答案。

我提出了自己的解决方案,并将其发布,这样可以为其他人节省一些时间。

import { NativeModules, StatusBarIOS } from 'react-native'
const { StatusBarManager } = NativeModules

componentDidMount () {
  if (Platform.OS === 'ios') {
    StatusBarManager.getHeight(response =>
        this.setState({statusBarHeight: response.height})
    )

    this.listener = StatusBarIOS.addListener('statusBarFrameWillChange',
      (statusBarData) =>
        this.setState({statusBarHeight: statusBarData.frame.height})
    )
  }
}

componentWillUnmount () {
  if (Platform.OS === 'ios' && this.listener) {
    this.listener.remove()
  }
}

工作原理

1) 获取初始高度,注意它是异步方法

StatusBarManager.getHeight(response =>
    this.setState({statusBarHeight: response.height}))

2) 设置状态栏更改的侦听器

StatusBarIOS.addListener('statusBarFrameWillChange',
    (statusBarData) =>
      this.setState({statusBarHeight: statusBarData.frame.height})
  )

3) 在componentWillUnmount中删除侦听器

if (Platform.OS === 'ios' && this.listener) {
  this.listener.remove()
}

您可以使用 react-native-status-bar-height 库中获取状态栏的高度,并可以像这样使用

marginTop: getStatusBarHeight()

或者,如果状态栏设置为半透明,则可以将其用作状态栏的高度。

如果您使用Expo

那就 import { Constants } from 'expo'

高度为 Constants.statusBarHeight

See Ref Here 和 here for Expo

现在是 import Constants from 'expo-constants';

改变 'expo' 到 'expo-constants' .