时间戳

首页 > 解决方案 > 0.62.x 中维度的 React Native 状态栏事件

react-native - 0.62.x 中维度的 React Native 状态栏事件

问题描述

StatusBarIOS 有一个方法addListener可以让我们监听状态栏高度的变化，如下所示：

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

StatusBarIOS 已弃用，并提示代码已合并到 StatusBar

在此处输入图像描述

我们如何监听statusBarFrameWillChange事件？

标签： react-native

解决方案

您可以使用该NativeEventEmitter模块，这是一个使用模块获取状态栏高度的反应钩子的示例。

import React, { useState, useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';

const { StatusBarManager } = NativeModules;

export default function useStatusBarHeight() {
  const [value, setValue] = useState();

  useEffect(() => {
    const emitter = new NativeEventEmitter(StatusBarManager);
    StatusBarManager.getHeight((statusBarFrameData) => setValue(statusBarFrameData.height));
    const listener = emitter.addListener('statusBarFrameWillChange', (data) => setValue(data.frame.height));

    return () => listener.remove();
  }, []);

  return value;
}

此代码段还使用 StatusBarManager 来获取初始高度。

推荐阅读