@malacca/bottom-tabs

修改自 @react-navigation/bottom-tabs

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

1. 字体大小 issue，兼容系统字体缩放
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 与 原版 相同，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 的透明度

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 项目 -> 修改文件, 之后按照以下顺序编译发布

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