在ios和重叠视图上调用或共享个人热点时状态栏高度是否发生变化,如何在状态栏高度发生变化时检测状态栏高度?
答案 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
答案 2 :(得分:0)
现在是import Constants from 'expo-constants';
将'expo'
更改为'expo-constants'
。