React 导航获取 class 组件内的堆栈导航器 header 高度（无钩子）

Question

我知道可以使用以下钩子 (V5) 获取堆栈 header 高度：

import { useHeaderHeight } from '@react-navigation/stack';

是否有 class 组件的解决方法？目前，我正在使用上下文使用者来获取 render() 函数内的高度：

<HeaderHeightContext.Consumer>
                  {headerHeight => (   
    ...
    )}
</HeaderHeightContext.Consumer>

但我希望 header高度超出我的 render() 函数。

Answer 1

你有没有在你的组件中试过这样的东西：

static contextType = HeaderHeightContext;

componentDidMount() {
   console.log(this.context); // this is your height
}

来自documentation：

The contextType property on a class can be assigned a Context object created by React.createContext(). This lets you consume the nearest current value of that Context type using this.context

React 导航获取 class 组件内的堆栈导航器 header 高度（无钩子）

React navigation Get stack navigator header height inside class component (without hooks)

react-native

react-navigation

react-navigation-v5