nativescript - 如何创建底部导航栏
问题描述
我正在尝试使用nativescript-bottom-navigation 插件在我的应用程序中创建一个简单的固定底部导航栏- 并不断出错。它不会构建,并且在那个可怕的异常黑屏中显示的许多错误中,是“AHBottomNavigation 不是构造函数”。
我只想要固定导航中的 3 个图标:主页、帐户、程序
我使用的是纯 Javascript,演示教程使用 TypeScript。这可能是问题所在。
我遵循的步骤
- 我使用命令行安装了插件。
- 我将我的图标手动添加到资源文件夹
我的搜索页面 [导航所在的位置]
<Page
navigatingTo="onNavigatingTo"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:bottomNav="nativescript-bottom-navigation"
class="page">
<ActionBar class="action-bar">
<!--
Use the NavigationButton as a side-drawer button in Android
because ActionItems are shown on the right side of the ActionBar
-->
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<!--
Use the ActionItem for IOS with position set to left. Using the
NavigationButton as a side-drawer button in iOS is not possible,
because its function is to always navigate back in the application.
-->
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left">
</ActionItem>
<Label class="action-bar-title" text="Search"></Label>
</ActionBar>
<GridLayout columns="*"
rows="*, auto">
<StackLayout row="0">
<Label text="content"></Label>
</StackLayout>
<bottomNav:BottomNavigation tabs="{{ tabs }}"
activeColor="green"
inactiveColor="red"
backgroundColor="black"
keyLineColor="black"
row="1"></bottomNav:BottomNavigation>
</GridLayout>
</Page>
这里是...
搜索视图模型.js
const observableModule = require("tns-core-modules/data/observable");
const SelectedPageService = require("../shared/selected-page-service");
const BottomNavigation = require("nativescript-bottom-navigation").BottomNavigation;
const BottomNavigationTab = require("nativescript-bottom-navigation").BottomNavigationTab;
const OnTabSelectedEventData = require("nativescript-bottom-navigation").OnTabSelectedEventData;
function SearchViewModel() {
SelectedPageService.getInstance().updateSelectedPage("Search");
const viewModel = observableModule.fromObject({
/* Add your view model properties here */
tabs: [
new BottomNavigationTab('First', 'ic_home'),
new BottomNavigationTab('Second', 'ic_view_list'),
new BottomNavigationTab('Third', 'ic_menu')
]
});
return viewModel;
}
module.exports = SearchViewModel;
我无法理解设备上显示的错误屏幕(我正在 Android 设备上进行测试)。
有谁知道我哪里出错了?任何指针将不胜感激。
谢谢你。
解决方案
您可以<DockLayout>
在不使用任何插件的情况下实现相同的目的。
<DockLayout height="100%">
<!-- bottom navigation buttons -->
<StackLayout dock="bottom" height="50" class="bottom-navigation" orientation="horizontal">
<Button text="Home"/>
<Button text="Accounts"/>
<Button text="Programs"/>
</StackLayout>
<!-- other top content -->
<Button dock="top" text="Other Content"/>
</DockLayout>
然后用于CSS
规范化布局:
.bottom-navigation {
background-color:#54d4aa;
}
.bottom-navigation button {
width: 33.33%;
background-color:#54d4aa;
border-color: transparent;
border-width: 1;
color:white;
}
您可以替换<Button>
为<StackLayout>
添加图标和文本。
推荐阅读
- xamarin - 即使在所有权限到位后,BroadcastReceiver 也没有接收到
- tabulator - 制表器中的几个嵌套表
- python - 日期时间到季节
- java - Java 模块(在 Java 9 中)、OSGi 包和微服务之间的具体区别是什么?他们每个人的具体目的是什么?
- python - Python import 语句中的双下划线是什么意思?
- java - 使用BottomSheetFragment时,下面的灰色显示重叠android导航按钮?
- javascript - lodash 按对象过滤对象数组
- jquery - 如果属性 VALUE 已经存在,删除它,否则添加它 jQuery
- node.js - 如何验证 NestJs 上的请求 excel 数据?
- c# - 使用 O365 共享帐户创建 Outlook 约会