@malacca/bottom-tabs NPM

源于以下需求，无法通过自定义方式达到目的：

字体大小 issue，兼容系统字体缩放
原版固定了 icon 尺寸, 导致定义图标时自由度太低，且在横屏下问题更大
所提供配置项太少，可自定义项太少

安装方式

yarn add @malacca/bottom-tabs

使用方式与原版相同

import { createBottomTabNavigator } from '@malacca/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator {...navigatorProps}>
      <Tab.Screen name="Home" component={HomeScreen} options={{...screenOptions}}/>
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

上例中 navigatorProps 与原版相同，screenOptions 有少许不同，以下为支持的配置项，标注 + 的为新增配置，~~删除线~~ 为移除的配置项

最基本属性

title: 设置为 string, 会作为标题文字 headerTitle 的 fallback，底部 Tab 的 tabBarLabel 文字的 fallback
lazy: 选修卡页面是否为懒加载（即切换至页面时才渲染），默认为 true
unmountOnBlur: 页面失去焦点后是否自动卸载，若为 true，每次切换至页面都会重新加载，默认为 false

与 Header 组件相关的属性

参考 StackNavigator options 中与 Header 组件相关的属性，支持 Elements/Header 组件直接支持的所有属性，参考上面 StackNavigator.Screen options 所介绍的不含 * 的 Header 相关属性。除了这些属性外，额外扩展并支持以下属性

header: 自定义标题栏组件，定义为函数，返回一个 RN 组件；设置该属性，即不再使用默认 Header。
headerShown: 是否显示标题栏
...: 其他 Header 支持的属性

TabBar 整体性质的属性

以下属性在任意页面设置都会影响整个 TabBar, 比如可以实现这个需求

tabBarBackground: 默认情况下，背景为 tabBar 的背景色，若指定了该组件， tabBar 背景色会自动设置为透明，tabBarBackground 组件在 Z 轴上位于 tabBar 的下面，可以设置一些个性的 UI 效果，比如渐变色、图片、毛玻璃等。
tabBarStyle: TabBar 整体容器的样式
tabBarShowLabel: 是否显示 TabBar 的文字
tabBarLabelPosition: TabBar 文字显示的位置，默认会根据设备类型自动显示
- below-icon: 文字显示在图标下面（手机默认）
- beside-icon: 文字显示在图标右边（平板默认）
tabBarInactiveTintColor: 默认状态下文字颜色
tabBarActiveTintColor: 激活状态下文字颜色
tabBarInactiveBackgroundColor: 默认状态下背景颜色
tabBarActiveBackgroundColor: 激活状态下背景颜色
tabBarHideOnKeyboard: 在键盘展开时隐藏 TabBar，默认 false
+tabBarPressColor: Android 系统按下 Tab 时的水波纹颜色, 若不使用该效果, 设置为 null
+tabBarPressOpacity: 不支持或禁止水波纹的情况下, 按下 Tab 的透明度