react-native - 对 0.62.x 中的维度响应 native 状态栏事件

Question

StatusBarIOS有一个方法addListener，它允许我们监听状态栏高度的变化，如下所示:

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

StatusBarIOS 已弃用，并显示代码已合并到 StatusBar 的消息

我们如何监听 statusBarFrameWillChange 事件？

Answer 1

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

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 来获取初始高度。