在调用/共享热点时,React本机检测IOS状态栏高度?

时间:2018-04-08 13:44:49

标签: react-native-ios

在ios和重叠视图上调用或共享个人热点时状态栏高度是否发生变化,如何在状态栏高度发生变化时检测状态栏高度?

3 个答案:

答案 0 :(得分:5)

我已经面临这一挑战,并且没有找到有关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()
}

答案 1 :(得分:2)

您可以使用react-native-status-bar-height库来获取状态栏的高度,并且可以使用

marginTop: getStatusBarHeight()

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

如果您正在使用Expo

然后只import { Constants } from 'expo'

高度将为Constants.statusBarHeight

See Ref Herehere for Expo

答案 2 :(得分:0)

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

'expo'更改为'expo-constants'