npm package: @malacca/bottom-tabs
Description: Bottom tab navigator following iOS design guidelines
Latest version: 1.0.8

修改自 [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator/)

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

1. 字体大小 [issue](https://github.com/react-navigation/react-navigation/issues/10219)，兼容系统字体缩放
2. 原版固定了 icon 尺寸, 导致定义图标时自由度太低，且在横屏下问题更大
3. 所提供配置项太少，可自定义项太少

安装方式

`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` 与 [原版](https://reactnavigation.org/docs/bottom-tab-navigator#props) 相同，`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](https://reactnavigation.org/docs/elements#header) 支持的属性

## TabBar 整体性质的属性

以下属性在任意页面设置都会影响整个 TabBar, 比如可以实现这个 [需求](https://github.com/react-navigation/react-navigation/pull/8155)

- `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 的透明度

## TabBar 按钮性质的属性

以下属性仅影响所配置页面对应 Tab 按钮

- +`tabBarItem`: 自定义 TabBar Item 容器组件
- `tabBarItemStyle`: TabBar Item 容器的样式
- `tabBarButton`: 设置包裹 `tabBarLabel`,`tabBarIcon`,`tabBarBadge` 的容器组件
- `tabBarIcon`: TabBar 图标组件
- ~~`tabBarIconStyle`: TabBar 图标样式~~
- +`tabBarIconProps`: 任意 TabBar 图标组件支持的属性, 如 `{style:{}, ...}`
- `tabBarBadge`: TabBar 角标，可以是 `String`/`Number`(默认组件为 `Text`) 或 `+自定义组件`
- ~~`tabBarBadgeStyle`: TabBar 角标样式~~
- +`tabBarLabelProps`: TabBar 角标组件支持的属性, 如 `{style:{}, ...}`
- `tabBarLabel`: TabBar 要显示的文字（不设置会使用 `title` 属性），可以设置为 `String` 或自定义组件
- ~~`tabBarLabelStyle`: TabBar 文字的样式~~
- +`tabBarLabelProps`: TabBar 文字组件支持的属性, 如 `{style:{}, ...}`
- `tabBarAllowFontScaling`: TabBar 文字是否随系统字体大小缩放
- `tabBarAccessibilityLabel`: 无障碍标签
- `tabBarTestID`: 用于本地测试的 ID

## 开发

若需再此版本继续修改, fork [项目](https://github.com/malacca/react-navigation) -> 修改文件, 之后按照以下顺序编译发布

1. 在项目根目录 `yarn`
2. 在 `packages` 的子目录按照 `routers` / `core` / `native` / `elements` 顺序依次执行 `yarn`
3. 最后 `cd bottom-tabs` 执行 `yarn`, 或直接执行 `npm publish`