Material 底部导航的 Nativescript 实现

该模块在 iOS 和 Android 上都实现了底部导航布局。
您可以通过向组件添加 "shifted" 类来给导航项添加滑动动画。图标和标题扩展自 Nativescript Label。您可以使用类似 material-icons 或 font-awesome 的字体库。

如果您想将其用作根导航器，您的 app.ts 必须如下所示

import "./bundle-config";
import {startWithMenu} from 'nativescript-nbmaterial-bottomnav';

startWithMenu({ moduleName: 'home/home-page' }, "menu/menu-page");

"moduleName" 是您的第一个屏幕。

menu-page 看起来像这样

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:bnav="nativescript-nbmaterial-bottomnav">
	<bnav:BottomNavigation autoselect="false" select="selectNav" id="bottomnav" class="shifted">
		<bnav:BottomNavigationItem>
			<bnav:Icon text="dashboard"  />
			<bnav:Title text="Home"/>
		</bnav:BottomNavigationItem>
		<bnav:BottomNavigationItem>
			<bnav:Icon text="add"/>
			<bnav:Title text="Ajouter" />
		</bnav:BottomNavigationItem>
		<bnav:BottomNavigationItem>
			<bnav:Icon text="favorite"/>
			<bnav:Title text="Consulter" />
		</bnav:BottomNavigationItem> 
	</bnav:BottomNavigation>  
</Page>

}

查看所有模块