市场place
作者 NativeScript.org
@nativescript-community/ui-material-bottom-navigation
由 NativeScript 社区贡献 | v7.2.62
Material Design 底部导航栏允许在应用的主要目的地之间进行切换。点击底部导航图标可以直接跳转到相关视图或刷新当前活动视图。
npm i --save @nativescript-community/ui-material-bottom-navigation

NativeScript Material 底部导航

为 NativeScript 提供的 Material Design 底部导航组件。

npm npm

内容

  1. 安装
  2. 变更日志
  3. 常见问题解答
  4. 用法
  5. API

安装

ns plugin add @nativescript-community/ui-material-bottom-navigation

请确保在添加插件后运行新的构建以避免任何问题。

变更日志

常见问题解答

用法

原生 NativeScript

重要： 请确保在 Page 元素上包含 xmlns:mds="@nativescript-community/ui-material-bottom-navigation"。

XML

<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
    <mdt:BottomNavigation width="100%" id="main-tabview" class="main-tabview"
                selectedIndexChanged="{{onSelectedIndexChanged}}"
                iosOverflowSafeArea="true" selectedIndex="0" tabsPosition="bottom" swipeEnabled="false">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <mdt:TabStrip backgroundColor="{{ color('dark')}}" color="{{ color('blue')}}">
                <mdt:TabStripItem  class="tab-item">
                    <Image src="font://&#xe1b0;" class="fal"></Image>
                    <Label text="Home" ios:fontSize="10" android:fontSize="12"></Label>
                </mdt:TabStripItem>
                <mdt:TabStripItem class="tab-item">
                    <Label text="{{ L('search') }}" ios:fontSize="10" android:fontSize="12"></Label>
                    <Image src="font://&#xe024;" class="fal"></Image>
                </mdt:TabStripItem>
                <mdt:TabStripItem  class="tab-item">
                    <Label text="{{ L('trips') }}" ios:fontSize="10" android:fontSize="12"></Label>
                    <Image src="font://&#xf03a;" class="fal"></Image>
                </mdt:TabStripItem>
                <mdt:TabStripItem class="tab-item">
                    <Label text="{{ L('inbox') }}" ios:fontSize="10" android:fontSize="12"></Label>
                    <Image src="font://&#xf4b6;" class="fal" id="tab-inbox-icon-fal"></Image>
                </mdt:TabStripItem>
            </mdt:TabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text="Home" class="h2 text-center"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text="Search Page" class="h2 text-center"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text="TRansactions" class="h2 text-center"></Label>
                </GridLayout>
            </mdt:TabContentItem>
            <mdt:TabContentItem>
                <GridLayout>
                    <Label text="Inbox" class="h2 text-center"></Label>
                </GridLayout>
            </mdt:TabContentItem>
        </mdt:BottomNavigation>
</Page>

CSS

BottomNavigation.bottom-nav {
    background-color: orangered;
    color: gold;
    font-size: 18;
}

MDTabStripItem.tabstripitem-active {
    background-color: teal;
}

MDTabStripItem.tabstripitem-active:active {
    background-color: yellowgreen;
}

MDTabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
MDTabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
MDTabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}
BottomNavigation TabStrip {
    highlight-color: red;
}

NativeScript + Angular

import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular";

@NgModule({
    imports: [
        NativeScriptMaterialBottomNavigationModule,
        ...
    ],
    ...
})
    <MDBottomNavigation selectedIndex="1">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <MDTabStrip>
            <MDTabStripItem>
                <Label text="Home"></Label>
                <Image src="font://&#xf015;" class="fas"></Image>
            </MDTabStripItem>
            <MDTabStripItem class="special">
                <Label text="Account"></Label>
                <Image src="font://&#xf007;" class="fas"></Image>
            </MDTabStripItem>
            <MDTabStripItem class="special">
                <Label text="Search"></Label>
                <Image src="font://&#xf00e;" class="fas"></Image>
            </MDTabStripItem>
        </MDTabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <MDTabContentItem>
            <GridLayout>
                <Label text="Home Page" class="h2 text-center"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text="Account Page" class="h2 text-center"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text="Search Page" class="h2 text-center"></Label>
            </GridLayout>
        </MDTabContentItem>
    </MDBottomNavigation>

NativeScript + Vue

import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';

Vue.use(BottomNavigation);
<MDBottomNavigation selectedIndex="1">
        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
        <MDTabStrip>
            <MDTabStripItem>
                <Label text="Home"></Label>
                <Image src="font://&#xf015;" class="fas"></Image>
            </MDTabStripItem>
            <MDTabStripItem class="special">
                <Label text="Account"></Label>
                <Image src="font://&#xf007;" class="fas"></Image>
            </MDTabStripItem>
            <MDTabStripItem class="special">
                <Label text="Search"></Label>
                <Image src="font://&#xf00e;" class="fas"></Image>
            </MDTabStripItem>
        </MDTabStrip>

        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
        <MDTabContentItem>
            <GridLayout>
                <Label text="Home Page" class="h2 text-center"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text="Account Page" class="h2 text-center"></Label>
            </GridLayout>
        </MDTabContentItem>
        <MDTabContentItem>
            <GridLayout>
                <Label text="Search Page" class="h2 text-center"></Label>
            </GridLayout>
        </MDTabContentItem>
    </MDBottomNavigation>

NativeScript + React

首先，在您的 React NativeScript 应用渲染之前注册组件。一个好的放置代码的位置是在您的入口点文件（可能被称为 src/app.ts 或类似），在调用 ReactNativeScript.start 函数之前。以下是安装方法

import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';

registerTabNavigationBase();
registerBottomNavigation();

当可用时（我在写作时尚未实现，但打算在不久的将来实现），最好通过 React NativeScript Navigation 导出的 bottomNavigationNavigatorFactory() API 使用此组件，因为它使嵌套导航变得容易，但以下是直接使用它的方法

import * as React from 'react';

export function BottomNavigation() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);

    return (
        <bottomNavigation
            selectedIndex={selectedIndex}
            onSelectedIndexChanged={(args) => {
                setSelectedIndex(args.newIndex);
            }}
            style={{ backgroundColor: 'orange' }}
        >
            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
            <tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
                <tabStripItem nodeRole="items">
                    <label nodeRole="label">Home</label>
                    <image nodeRole="image" src="font://&#xf015;" className="fas" />
                </tabStripItem>
                <tabStripItem nodeRole="items">
                    <label nodeRole="label">Account</label>
                    <image nodeRole="image" src="font://&#xf007;" className="fas" />
                </tabStripItem>
                <tabStripItem nodeRole="items">
                    <label nodeRole="label">Search</label>
                    <image nodeRole="image" src="font://&#xf00e;" className="fas" />
                </tabStripItem>
            </tabStrip>

            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
            <tabContentItem nodeRole="items">
                <gridLayout style={{ backgroundColor: 'blue' }}>
                    <label style={{ color: 'white' }}>Home Page</label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem nodeRole="items">
                <gridLayout style={{ backgroundColor: 'cyan' }}>
                    <label style={{ color: 'black' }}>Account Page</label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem nodeRole="items">
                <gridLayout style={{ backgroundColor: 'magenta' }}>
                    <label style={{ color: 'black' }}>Search Page</label>
                </gridLayout>
            </tabContentItem>
        </bottomNavigation>
    );
}

故障排除

如果您在写入例如 <bottomNavigation> 时看到此类错误

属性 'bottomNavigation' 在类型 'JSX.IntrinsicElements' 上不存在.ts(2339)

请确保您有

  1. 已安装 react-nativescript npm 模块。
  2. 已安装 @types/react npm 模块，严格使用在 React NativeScript 启动模板 中提供的确切版本。
  3. 运行与 React NativeScript 模板一起提供的 postinstall 脚本 – npm run postinstall – 以修复 @types/react。
  4. 如上所述注册组件（即导入并运行 registerTabNavigationBase() 和 registerBottomNavigation() 方法）。
  5. 如果使用 Visual Studio Code，请单击导入 @nativescript-community/ui-material-bottom-navigation/react 以跳转到文件；打开文件将强制它加载其提供的类型定义。

API

属性

名称 类型 描述
items 数组 获取或设置 BottomNavigation 的项目。
selectedIndex 数字 获取或设置 BottomNavigation 的 selectedIndex。
swipeEnabled 布尔值 获取或设置 Tabs 的 swipe 启用状态。
offscreenTabLimit 数字 获取或设置 Tabs 的预加载标签数量。
tabStrip TabStrip 获取或设置 BottomNavigation 的 tabStrip。
tabsPosition "top", "bottom" 获取或设置 Tabs 的位置状态。默认值：top
iOSTabBarItemsAlignment "leading", "justified", "center", "centerSelected" 仅限 iOS：获取或设置 iOS 中标签栏图标的 MDCTabBarAlignment。默认值：justified

事件

名称 描述
selectedIndexChanged 当selectedIndex属性更改时发出。
loaded 当视图加载时发出。
unloaded 当视图卸载时发出。
layoutChanged 当视图的布局边界由于布局处理而更改时发出。