What is the Best Practice for Making a Customized TabBar in Goji.js?

[Ziyu-Chen]

Hi @malash! Sorry for the confusion! I don't have much experience submitting issues before. Let me restructure my issue.

Expected Behavior: Customized TabBar is stuck to the bottom and never disappears.

Current Behavior: Customized TabBar disappears with the current page whenever there's a page transition. (Scroll Animation)

Possible Solutions:

1. custom-tab-bar: A custom-tab-bar can be set up in a native WeChat mini-program but it requires the native app to have a "custom-tab-bar" folder at the same level as the pages folder. Even though I tried adding a "custom-tab-bar" folder in the src folder of my Goji.js project, this folder and the files in it just never get compiled. source: https://www.jianshu.com/p/91cd8db69739

2. Making the mini-program a single page application: This will definitely do away with the scroll animation altogether. However, I have to change the structure of my app just to fit a customized TabBar and it might cause future contributors to my app a lot of confusion. source: https://github.com/evenyao/wx-diy-tabbar

3. Some smart Goji/Airbnb way that I don't know yet?

Context (Environment): Goji.js. Customized TabBar (composed of navigator components) used instead of WeChat mini-program's native TabBar.

Description: The following is the code that I wrote for my TabBar. It contains multiple Navigators to the main pages, and it is displayed on the main pages. Looking forward to your answer!

Originally posted by @Ziyu-Chen in https://github.com/airbnb/goji-js/issues/44#issuecomment-734544256

[malash]

Hi @Ziyu-Chen

I almost understand your questions. I think there are 2 separate issues.

1. When and how does GojiJS support custom-tab-bar ?

2. How to implement the same feature in current GojiJS framework.

At first, GojiJS doesn't custom-tab-bar for now. There are several problems to be decided before we move it into next steps.

1. This feature is not a common solution that only WeChat and QQ support. Supporting this feature might reduced the cross-platform capabilities.

2. How to support getTabBar API.

And then, I think you can try these ways to implement the same feature which support not only WeChat/QQ but also other platforms.

1. Use position: fixed to render custom tab bar on each pages and use wx.redirectTo to switch between them.

// pages/a.tsx

render(
  <>
    <PageA />
    <CustomTabBar />
  </>
);

2. Treat all tab bar pages rather than the whole Mini Program as a single page application. Switching between tabs actually is internal state changes.

// pages/index.tsx

render(
  <>
    {selected === 'a' && <PageA />}
    {selected === 'b' && <PageB />}
    ...
    <CustomTabBar />
  </>
);

[Ziyu-Chen]

@malash Thank you for your answer! I'll give it a shot.