Extended

Navigators

Navigation

Navigation is the navigator component on top of Mini Program. With navigationStyle: custom, you can use custom component to replace the origin one.

// page.config.tsexport default {  navigationStyle: 'custom'}

Once configured in this way, the default 'navigate bar' in current page will be removed. You need to implement a component in your own page to replace it.

custom nav bar example

// CustomNavigationBar.tsximport * as React from 'react'import { View } from '@binance/mp-components'import './CustomNavigationBar.scss'
export default function CustomNavigationBar({  title = "custom nav bar",}: Props) {  return <View className='cnb-container'>    <View className='custom-nav-bar'>      <View className='custom-nav-bar-title'>{title}</View>    </View>  </View>}

// CustomNavigationBar.scss.cnb-container {  position: relative;  padding: 0 10px;  height: var(--mp-navigator-height);  display: flex;  align-items: center;  justify-content: space-between;  background-color: #000000;  color: white;}.custom-nav-bar {  position: absolute;  left: 95px;  right: 95px;  height: 100%;  display: flex;  align-items: center;  justify-content: center;  top: 0;  display: flex;  align-items: center;  box-sizing: border-box;}

Usage

• React

// navigation.config.tsexport default {  navigationStyle: 'custom'}

// navigation.tsximport * as React from 'react'import { View } from '@binance/mp-components'import CustomNavigationBar from './CustomNavigationBar'import withProviders from '../../../../common/withProviders'import './navigation.scss'
function Page() {  return (    <View className='container'>      <CustomNavigationBar        title='Custom Navigation Bar'        loading={loading}        show={show}        color={color}        background={background}        back={true}        paddingTop={safeAreaTop}      />    </View>  )}
export default withProviders(Page)

and you can see

• Bxml

add "navigationStyle": "custom" to your {page}/{page}.json

{  "navigationBarTitleText": "web-view",  "usingComponents": {    "nav-component": "/custom-nav-bar/custom-nav-bar"  },  "navigationBarTextStyle": "white",  "backgroundColor": "#eeeeee",  "backgroundTextStyle": "dark",  "navigationStyle": "custom"}

add custom-nav-bar folder to root directory

├── custom-nav-bar.bxml└── custom-nav-bar.json

Tabbar

• React

configrue tabBar.custom: true to src/app.config.ts

tabBar: {  custom: true}

add custom-tab-bar in src

custom-tab-bar├── index.scss└── index.tsx

Similar to 'custom navigate bar', you need to implement a 'custom tab bar' yourself`

you can see

• Bxml

configrue tabBar.custom: true to app.json

"tabBar": {  "custom": true}

add custom-tab-bar in root directory

custom-tab-bar├── index.bxml├── index.bxss├── index.js└── index.json

you need to implement a custom tab bar yourself

you can refer to wechat

disableBounces

Set disableBounces: true in your {page}.config.js.

It prevents the page from sliding out of the screen area (only IOS)

export default {  disableBounces: true}

In iOS Simulator to preview