nativescript-bottombar 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
nativescript-bottombar 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
nativescript-bottombar 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

npm npm twitter: @_rhanb

Build Status Package size Unpacked size

NPM

NativeScript BottomBar 🍻🔥🇫🇷

NativeScript plugin for BottomNavigationView and UITabBar.

PS: To have a material design on iOS too, free to use the plugin nativescript-bottom-navigation

No third libraries are used in this plugin, wich means this plugin is lightweight because only javascript files will be added to your app.

iOS Android
iOS Android

Installation

tns plugin add nativescript-bottombar@next

Usage

API documentation

Common Usage

Icons

The properties icon and checkedIcon supports the following path formats:

  • ~/: relative path to the app folder
  • res://: icons must be in the App_Resources folder as follow
iOS Android
iOS Android

Ripple effect color on Android

To change the color of the ripple effect when an item is tapped, please add the following item to your AppTheme inside your App_Resources > Android > src > main > res > values > styles.xml file with the desired color resource.

<!-- Application theme -->
<style name="AppTheme" parent="AppThemeBase">
    <item name="colorControlHighlight">@color/ns_accent</item>
</style>

Android support

You will need Support Library APIs v28 installed on your developer machine to be able to successfully use this plugin. If you already use the latest {N} version 5.0, you should be good to go.

More details

API documentation

TODO

  • Allow to hide/show the BottomBar
  • Expose more BottomBarItem customisation (font, position, etc..)
  • Expose selection indicator on iOS
  • Implement more unit tests and e2e tests
展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
发表于大前端专区
2015/06/17 10:59

NativeScript 开发原生APP

最近在学习使用Native Script,官方查看详细信息: native script ; 一般按着它的文档很容易部署好开发环境, 过称中有几个问题这里说一下。 安装 安卓 sdk 的时候, 要增加国内代理,这样速度快,关于代理,网上有很多,我用的那个速度不是很快,就不推荐了。 在MAC上用真机调试的时候,安卓默认是安不上的。此时,安装 第一步: 查看usb设备信息 在 终端输入:system_profiler SPUSBDataType 可以查看连接的usb设备的信息 比如...

0
2
发表于大前端专区
2019/01/04 18:10

使用 NativeScript 创建原生App

安装nativescript cli npm i -g nativescript 使用nts命令创建nativescript项目 tns create ng-native --ng 在手机上安装nativescript playground 和 nativescript preview 进入项目文件夹 用电脑连接手机 在手机上跑代码 cd ng-native tns run ios

0
0
发表了博客
2018/06/14 09:51

NativeScript Vue 和 Weex 对比与分析

Weex   Weex是一个项目,由阿里巴巴创造。它的口号是“一次编写,到处运行”,这意味着你可以使用完全相同的代码库构建网站(HTML5),Android和iOS的应用。目前有几个Weex的生产项目,在中国可能有数以百万计的用户。对Weex的核心正在积极发展中,每周都会PRs。Weex有一些组件和插件与本地的平台交互,还有一套有点粗糙的工具。 NativeScript   四月,Igor Randjelovic开辟了另外的可能性,使用Vue与NativeScript。Natives...

0
0
2018/04/17 21:27

NativeScript 4.0.0 发布,创建跨平台原生应用的框架

关注本号 行业信息一触直达 NativeScript 4.0.0 已发布,NativeScript 可以使用 Javascript,CSS, XML 创建真正的 Native 跨平台应用,支持 iOS Android 和 Windows Universal,NativeScript 可将跨平台代码翻译成目标平台的代码。 NativeScript Telerik 开源了创建安卓、iOS和Windows Universal跨平台原生应用的框架,NativeScript(github: https://github.com/NativeScript/NativeScript)的公共访问权限。 NativeScript 可以...

0
0
发表于大前端专区
2018/04/13 12:58

用Vue.js开发原生应用选择Weex还是NativeScript?

![](https://user-gold-cdn.xitu.io/2018/4/13/162bd3e1791785ff?w=2000&h=550&f=png&s=116872) Vue.js是一个很好的框架!它有一个友好的学习曲线,结合了最好的React的组件方法和Angular的模板。尽管如此,Vue.js仍然有一个限制,它还不能像React的React Native,Vue.js目前还没有稳定、广泛采用的方法来开发原生应用程序。 不过,这肯定会改变!目前有两个框架正在开发,可以打开用Vue.js框架创建本地应用程序之门,我们都很喜...

0
2
发表了博客
2018/08/16 17:29

mac下创建nativescript angular项目

1 . set up your system step 1: install node.js step 2: install the nativescript cli 2.1 npm install -g nativescript 2.2 verify the nativescript cli tns step 3: install ios and android requirements 3.1 window 3.2 macos 3.2.1 ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)" 3.2.2 Do you have Xcode installed? (y/n) 我在执行时报error: xcode-select: error: tool 'xcodebuild' requires ...

0
0
发表了博客
2018/04/19 14:27

nativescript(angular2)——ListView组件

NativeScript是一个不使用webview的情况下构建跨平台并且原生的iOS和Android应用。使用Angular、TypeScript或JavaScript来获得原生UI和性能体验,同时可重用web项目中的技术和代码。通过JavaScript实现100%的原生api访问通过JavaScript,并使用npm、CocoaPods、Gradle获取三方库或者插件,属于开源项目。 ListView案例图片如下: 库结构 在package.json文件中添加:"nativescript-telerik-ui": "^2.0.1", 库引用 组件中引用 上拉...

0
0
发表了博客
2018/04/19 13:44

nativescript(angular2)——轮播图组件

import { Directive, ElementRef, AfterViewInit, Input, OnDestroy } from "@angular/core"; import { AnimationCurve } from "tns-core-modules/ui/enums"; import { Image } from "tns-core-modules/ui/image"; import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout/stack-layout"; import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout"; import { GridUnitType } from "tns...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部