在react native中使用 react navigation 头部标签栏自定义按钮时的思考

1 参考

• react navigation官方文档

2 前言

• 当我想要在头部标签栏自定义一个按钮时，遇到一个焦灼的问题。是直接重options 里的header呢？还是，禁用掉框架给的头部标签。直接在页面中自己构造头部标签栏。这个问题我思索了很久，最后在阅读官方文档是，我看到其实官方关于这个问题，其实已经给到了我们解决方案。

3 问题

• 问题1：由于缺失了头部标签栏的高度，所引发的页面内容在不同设备上的适配问题。

• 问题2：如果，说将头部标签栏的重写放到到全局的Stack里，这就出现了一个不是问题的问题。你的按钮无法直接访问到页面的state。我有想到的方式是，你需要先将页面的数据先放到全局的state里，类似redux或mobx这样的全局状态管理组件。个人觉得这样做产生了不必要的性能消耗，同时也挺复杂的。我们不应该这样做。

4 解决方案概述

• 参考： https://reactnavigation.org/docs/stack-navigator

• 你可以将options中的headerTransparent属性设置为true，这样你的头部标签栏，直接与你的页面重叠。同时官方也给到两个内置的钩子函数用于获取头部标签栏的高度。：

//第一个
import {
    HeaderHeightContext } from '@react-navigation/stack';

<HeaderHeightContext.Consumer>
  {
   headerHeight => (
    /* 你可以直接在页面中引用这个函数，同时在你的最外层设置弹性布局的排列方式为column。 */
  )}
</HeaderHeightContext.Consumer>

//第二个
import {
    useHeaderHeight } from '@react-navigation/s