Star19
169
代码
代码
Issues99
Pull Requests26
项目讨论
Wiki
分析
Star19
169
chenhaoyue1chenhaoyue1[docs] 修改路径
458d65ad创建于 6月18日历史提交

模板版本：v0.4.0

react-navigation-tabs

Supported platforms License

[Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig)

安装与使用

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-navigation-tabs 版本所属关系如下：

三方库名称 三方库版本 发布信息 支持RN版本 Autolink 编译API版本 社区基线版本 npm地址
@react-native-ohos/react-navigation-tabs ~2.7.1 Gitcode Releases 0.77/82 否 API12+ 2.7.0 Npm Address
@react-native-oh-tpl/react-navigation-tabs ~2.7.0-0.1.0 Gitcode Releases 0.72 否 API12+ 2.7.0 Npm Address

对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

# for RN0.72
npm install @react-native-oh-tpl/react-navigation-tabs

# for RN0.77/82
npm install @react-native-ohos/react-navigation-tabs

yarn

# for RN0.72
yarn install @react-native-oh-tpl/react-navigation-tabs

# for RN0.77/82
yarn install @react-native-ohos/react-navigation-tabs

下面的代码展示了这个库的基本使用场景：

使用时 import 的库名不变。

import * as React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Albums from './Shared/Albums';
import Article from './Shared/Article';
import Contacts from './Shared/Contacts';
// @ts-ignore
import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';

const tabBarIcon =
  (name: string) =>
  ({ tintColor, horizontal }: { tintColor: string; horizontal: boolean }) => (
    <MaterialIcons name={name} color={tintColor} size={horizontal ? 17 : 24} />
  );

class AlbumsScreen extends React.Component {
  static navigationOptions = {
    title: '图片',
    tabBarLabel: 'Albums',
    tabBarIcon: tabBarIcon('photo-album'),
    tabBarButtonComponent: TouchableBounce
  };

  render() {
    return <Albums />;
  }
}

class ArticleScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Article',
    tabBarIcon: tabBarIcon('chrome-reader-mode'),
    tabBarButtonComponent: TouchableBounce
  };

  render() {
    return <Article />;
  }
}

class ContactsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Contacts',
    tabBarIcon: tabBarIcon('contacts'),
    tabBarButtonComponent: TouchableBounce
  };

  render() {
    return <Contacts />;
  }
}

class BackHome extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Back',
    tabBarIcon: tabBarIcon('home'),
    tabBarButtonComponent: TouchableBounce,
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler();
      navigation.navigate('Home');
    },
  };

  render(): React.ReactNode {
    return null;
  }
}

export default createBottomTabNavigator(
  {
    Albums: {
      screen: AlbumsScreen,
    },
    Article: {
      screen: ArticleScreen,
    },
    Contacts: {
      screen: ContactsScreen,
    },
    Back: {
      screen: BackHome,
    },
  },
  {
    initialRouteName: 'Albums',
    backBehavior: 'none',
    order: ['Albums', 'Contacts', 'Article', 'Back'],
    tabBarOptions: {
      backBehavior: 'history',
      inactiveBackgroundColor: '#851753ff', 
      activeBackgroundColor: '#f7eff3ff', 
      allowFontScaling: false,
      resetOnBlur: true,
      lazy: false,
      labelPosition: 'below-icon',
      inactiveTintColor: '#5355a1ff',
      activeTintColor: '#44c044ff',
      showIcon: false,
      adaptive: true,
      style: {
        height: 65,
        ppadding: 15,
      },
      labelStyle: {
        fontSize: 20,
      },
      tabStyle: {
        backgroundColor: '#e9f0f0ff',
      },
      safeAreaInset: {
        bottom: 'always',
        top: 'never',
      },
    },
  },
);

本库依赖以下三方库,请查看对应文档：

本库HarmonyOS侧实现依赖上述三方库原生端代码，如已在HarmonyOS工程中引入过上述库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照对应文档的Link章节进行引入。

Tip

本库依赖react-native-pager-view的能力，react-native-pager-view的能力已从ArkTS切换至CAPI。开启CAPI配置后过渡动画功能才能正常生效。

请在entry目录下的src/main/ets/pages/index.ets中的build函数中修改配置

   RNApp({   
      rnInstanceConfig: {
       ...,
       //enableCAPIArchitecture 默认为false 需改成true 
       enableCAPIArchitecture: true
      },
    ...
    })

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

在下述版本验证通过：

  1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
  2. RNOH：0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
  3. RNOH：0.82.18; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;

属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

createMaterialTopTabNavigator：创建顶部标签栏

Name Description Type Required Platform HarmonyOS Support
RouteConfigs 路由配置对象，用于将路由名称映射到对应的路由配置。 object yes all yes
TabNavigatorConfig 顶部标签导航器的配置项。 object no all yes

TabNavigatorConfig：顶部标签栏属性配置

Name Description Type Required Platform HarmonyOS Support
initialRouteName 首次加载时的初始标签页 routeName。 string no all yes
navigationOptions 导航器自身的导航选项，用于配置父级导航器。 object no all yes
defaultNavigationOptions 屏幕默认使用的导航选项。 object no all yes
order 定义标签页顺序的 routeName 数组。 array no all yes
paths 提供 routeName 到路径配置的映射，会覆盖 routeConfigs 中设置的路径。 object no all yes
backBehavior 回退行为配置：可通过 initialRoute 返回初始标签页。 'none' | 'initialRoute' | 'history' | 'order' | no all yes
tabBarPosition 标签栏位置。 'top' | 'bottom' no all yes
swipeEnabled 是否开启滑动切换标签页。 boolean no all yes
lazy 默认为 false。为 true 时，仅在标签页激活或预览滑动时渲染；为 false 时，立即渲染全部标签页。 boolean no all yes
lazyPlaceholderComponent 为尚未渲染的路由提供占位组件，参数中包含 route；需同时开启 lazy。 function no all yes
initialLayout 包含页面初始宽高的对象。 object no all yes
pagerComponent 用作分页器的 React 组件。分页器负责处理滑动手势与页面切换，默认使用 react-native-gesture-handler 处理手势。 function no all no
swipeDistanceThreshold 滑动切换的最小距离阈值。 number no all no
swipeVelocityThreshold 滑动切换的最小速度阈值。 number no all no
keyboardDismissMode 拖拽手势触发的键盘关闭方式。 'on-drag'| 'none' no all yes
sceneContainerStyle 页面容器样式。 object no all yes
tabBarComponent 可选，自定义要使用的标签栏组件。 function no all yes
onSwipeStart 滑动手势开始时的回调函数。 function no all yes
onSwipeEnd 滑动手势结束时的回调函数。 function no all yes
tabBarOptions 用于配置标签栏样式与交互行为的选项对象。 object no all yes

navitgationOptions：顶部导航配置项

Name Description Type Required Platform HarmonyOS Support
title 页面标题。 string no all yes
swipeEnabled 是否允许标签页滑动切换。 boolean no all yes
tabBarIcon 用于渲染标签图标的组件。 funtion no all yes
tabBarLabel 标签页名称。 string no all yes
tabBarAccessibilityLabel 为标签按钮设置无障碍标签。 string no all yes
tabBarTestID 标签按钮测试 ID。 string no all yes
tabBarOnPress 点击事件。 funtion no all yes
tabBarOnLongPress 长按事件。 funtion no all yes

tabBarOptions：顶部tab栏属性配置

Name Description Type Required Platform HarmonyOS Support
activeTintColor 激活标签的文字和图标颜色。 string no all yes
inactiveTintColor 未激活标签的文字和图标颜色。 string no all yes
showIcon 是否显示标签图标，默认 false。 boolean no all yes
showLabel 是否显示标签文本，默认 true。 boolean no all yes
upperCaseLabel 是否将标签文本转换为大写，默认 true。 boolean no all yes
pressColor 材质波纹颜色（仅 Android >= 5.0 生效）。 string no Android no
pressOpacity 标签按下时透明度（iOS 与 Android < 5.0）。 number no all yes
scrollEnabled 是否开启可滚动标签栏。 boolean no all yes
tabStyle 标签项样式对象。 object no all yes
indicatorStyle 标签指示器（底部线条）的样式对象。 object no all yes
labelStyle 标签文本样式对象。 object no all yes
iconStyle 标签图标样式对象。 object no all yes
style 标签栏样式对象。 object no all yes
allowFontScaling 标签字体是否随无障碍文字大小设置缩放，默认 true。 boolean no all yes
renderIndicator 接收当前路由等信息并返回自定义 React 元素作为标签指示器。 function no all yes

createBottomTabNavigator：创建底部标签栏

Name Description Type Required Platform HarmonyOS Support
RouteConfigs 路由配置对象，用于将路由名称映射到对应的路由配置。 object yes all yes
TabNavigatorConfig 底部标签导航器的配置项。 object yes all yes

TabNavigatorConfig：底部标签栏属性配置

Name Description Type Required Platform HarmonyOS Support
initialRouteName 首次加载时的初始标签页 routeName。 string no all yes
navigationOptions 导航器自身的导航选项，用于配置父级导航器。 object no all yes
defaultNavigationOptions 屏幕默认使用的导航选项。 object no all yes
resetOnBlur 切换离开某个页面时，重置其嵌套导航器状态。 boolean no all yes
order 定义标签页顺序的 routeName 数组。 array no all yes
paths 提供 routeName 到路径配置的映射，会覆盖 routeConfigs 中设置的路径。 object no all yes
backBehavior 回退行为配置：可通过 initialRoute 返回初始标签页。 'none' | 'initialRoute' | 'history' | 'order' | no all yes
lazy 默认为 false。为 true 时，仅在标签页激活或预览滑动时渲染；为 false 时，立即渲染全部标签页。 boolean no all yes
tabBarComponent 可选，自定义要使用的标签栏组件。 function no all yes
tabBarOptions 用于配置标签栏样式与交互行为的选项对象。 object no all yes

navitgationOptions：底部导航配置项

Name Description Type Required Platform HarmonyOS Support
title 页面标题。 string no all yes
tabBarVisible 显示/隐藏标签栏。 boolean no all yes
tabBarIcon 用于渲染标签图标的组件。 funtion no all yes
tabBarLabel 标签页名称。 string no all yes
tabBarButtonComponent 设置自定义标签栏按钮组件。 funtion no all yes
tabBarAccessibilityLabel 为标签按钮设置无障碍标签。 string no all yes
tabBarTestID 标签按钮测试 ID。 string no all yes
tabBarOnPress 点击事件。 funtion no all yes
tabBarOnLongPress 长按事件。 funtion no all yes

tabBarOptions：底部tab栏属性配置

Name Description Type Required Platform HarmonyOS Support
activeTintColor 激活标签的文字和图标颜色。 string no all yes
activeBackgroundColor 激活标签的背景色。 string no all yes
inactiveTintColor 未激活标签的文字和图标颜色。 string no all yes
inactiveBackgroundColor 未激活标签的背景色。 string no all yes
showLabel 是否显示标签文本，默认 true。 boolean no all yes
showIcon 是否显示标签图标，默认 true。 boolean no all yes
style 标签栏样式对象。 object no all yes
labelStyle 标签文本样式对象。 object no all yes
labelPosition 标签文本相对于图标的显示位置。 'beside-icon' | 'below-icon' no all yes
tabStyle 标签项样式对象。 object no all yes
allowFontScaling 标签字体是否随无障碍文字大小设置缩放，默认 true。 boolean no all yes
adaptive 是否根据屏幕尺寸调整图标与文本的排列方式。iOS 11 默认 true；false 时始终纵向排列，true 时平板上横向排列。 boolean no ios yes
safeAreaInset 覆盖 <SafeAreaView> 的 forceInset 配置。 object no all yes
keyboardHidesTabBar 键盘弹出时隐藏标签栏。 boolean no all yes

遗留问题

其他

  • tabBarOptions中的pressColor属性，不生效，无法实现按下更改颜色。 pressColor属性，是专门为Android平台设计的，这个属性在PlatformPressable中直接传递，在IOS上，pressColor属性没有直接对应的实现，IOS使用不同的机制来处理触摸反馈。

  • TabNavigatorConfig中的pagerComponent属性，不生效，无法实现分页功能。具体实现的renderPager属性只在react-native-tab-view 2.11.0-2.16.0版本上存在，其它版本上已废弃。

  • swipeDistanceThreshold、swipeVelocityThreshold属性，源库是直接透传给TabView组件的，属性功能是依赖库react-native-tab-view内部自行实现，并未对传递属性进行处理。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。