1.设定初始页(Idex.ets)

import {find} from '../pages/find'
import {home} from '../pages/home'
import {setting} from '../pages/setting'
@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController()
  @State gridMargin: number = 10
  @State gridGutter: number = 10
  @State sm: number = -2
  @State clickedContent: string = "";

  build() {
    Column() {

      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          home({message:'首页'})
        }.tabBar(new BottomTabBarStyle($r("app.media.home"), "首页"))

        TabContent() {
          find({message:'发现'})
        }.tabBar(new BottomTabBarStyle($r("app.media.find"), "发现"))

        TabContent() {
          setting({message:'设置'})
        }.tabBar(new BottomTabBarStyle($r("app.media.setting"), "设置"))
      }
      .animationDuration(800)
      .height('100%')
      .backgroundColor(0xf1f3f5)
    }
    .width('100%')
    .height('100%')
  }
}

效果如下:

2.自定义首页组件

@Entry
@Component
export struct home {
  @State message: string = '首页'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.自定义发现页面组件

// Index.ets
@Entry
@Component
export struct find {
  @State message: string = '发现'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

4.自定义设置页面组件

// Index.ets
@Entry
@Component
export struct setting {
  @State message: string = '发现'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

总结:主要是运用 了Tabs组件对导航栏进行布局，然后运用BottomTabBarStyle组件嵌套图标和文字，完成导航栏的制作。