Custom tabBars give developers more flexibility in setting tabbar styles to meet more personalized scenarios.

In custom tabBar mode:

• In order to ensure compatibility with the lower version and to distinguish which pages are tab pages, the relevant configuration items of the tabBar need to be fully declared, but these fields do not act on the rendering of the custom tabBar.
• At this point, the developer needs to provide a custom component to render the tabBar, and all tabBar styles are rendered by the custom component. It is recommended to render styles with the 'cover-view' + 'cover-image' component at the bottom of the fixed to ensure that the tabBar hierarchy is relatively high.
• Interfaces related to tabBar styles, such as 'ft.setTabBarItem', etc. will fail.
• The custom tabBar component instance under each tab page is different, you can get the custom tabBar component instance of the current page through the 'getTabBar' interface under the custom component.

Please note

To implement the tab check state, you must obtain the component instance through the 'getTabBar' interface under the current page, and call 'setData' to update the check state. Refer to the code example at the bottom.

1. Usage flow

1.1 Configuration Information

• Specify the 'custom' field in the 'tabBar' entry in 'app.json', while the rest of the 'tabBar' configuration is also complete.
• The 'usingComponents' entry must be declared in the json of all tab pages, or it can be opened globally in 'app.json'. Example:

1.2 Add tabBar code files

Add an entry file under the code root:

1.3 Write tabBar code

You can write it as a custom component that completely takes over the rendering of the tabBar. In addition, the custom component adds the 'getTabBar' interface, which can obtain the custom tabBar component instance under the current page