Nuke-tabbar NPM

Tabbar

category: UI
chinese: Tab切换
type: UI Component

Usage

tab toggle, commonly used in the entire layout framework of the business.

API

Tabbar

Props	Description	Type	Default
itemStyle	customized tabbar-item style, will override the default style, through this field, you can customize the width, height and layout of the tab navigation bar	object	false
style	Customize the style of the tabbar container and override the default style	object	false
navTop	The position of the navigation, default value is bottom, also can be adjusted to the top	boolean	false
navStyle	custom tab title bar styles need to be imported{active: {style...}, inactive: {style...}} active corresponding selection styles, inactive unchecks the style	object	false
navScrollable	navigation scrolls? If it can scroll, you don't limit the tab width and scroll horizontally. If it can't scroll, each child element flex =1 is equal to the parent container width	boolean	false
iconBar	with icon	boolean	false
activeKey	(Necessary) used to open and switch to the specified tab and receive the tab value	string	false
asFramework	use this as a framework to start this item. It needs the business side to control the shouldComponentUpdate event so that it will be optimized. Otherwise, it will be used as a simple container component, so that `props` change will be filtration controled.	boolean	false
onChange（embed mode invalid）	prevTab and nextTab are thrown when tab is switched, and props is not triggered manually	funtion	false customChange（embed mode invalid）	Defines the injection method name of the built-in switch tab, which defaults to changeTo, in tabContent call this.changeTo('tab 的key') directly.	string	false
customFocus（embed mode invalid）	Defining the intersection point of hook. This method is implemented when tabbar is switched, default method is `onFoucs`. The `changeTo` can be defined directly in tabContent. When tab is switched, `true` is cut into `false`.	string	false

Watching

Change state, props does not take effect Default setting of asFrameworkis false and non tabbar state changes will be filtered, in order to improve the performance of the effect. If the user needs to control the component through state changes, set it to true.
embed mode When Tabbar.item sets the SRC property, the embed mode is enabled. The mode H5 shows the use of iframe loading pages. Native shows the ability to load modules with embed loaded with jsBundle. But not all app supported embed mode, so please fully self-test before use.

Tabbar.Item

Props	Description	Type	Default
render	Custom rendering function, `item` will be imported whether the current belongs to the active state of status, the current `tabkey` as the parameter	function	null
tabKey	（necessary）define the key of this tabbar	string	null
preventDefaultEvent	defines whether to disable default events	boolean	null
num	the numbers revealed, follow the title of tab, show way: title(num)	string	null
onPress	handler event after clicking	function	null
title	revealing copy	string	null
icon	if `tabbar` sets iconbar=true, so it valids here, {src: 'xxx',selected:'xxx',size:'small/medium/large',style:{}}	object	null
src(enable embed mode)	define being loaded jsbundle url	string	null