沉浸式导航栏

• father::常见业务需求

代码示例

配置禁用原生导航栏：

export default definePageConfig({
  navigationStyle: "custom",
});

• 这将会导致页面开头会顶到应用的通知栏，即屏幕的边缘
  • 但微信小程序的退出按钮还会存在

下面是一个基于 Taro 框架实现沉浸式导航栏的简单示例，主要演示如何通过获取系统信息和设置页面样式，实现导航栏与状态栏的无缝衔接。

import React, { useEffect, useState } from 'react'
import { View, Text, StyleSheet, StatusBar } from '@tarojs/components'
import Taro from '@tarojs/taro'
 
const ImmersiveNavbar = () => {
  const [statusBarHeight, setStatusBarHeight] = useState(0)
  const [navBarHeight, setNavBarHeight] = useState(44) // 默认导航栏高度
 
  useEffect(() => {
    // 获取状态栏高度，适配不同设备
    const systemInfo = Taro.getSystemInfoSync()
    setStatusBarHeight(systemInfo.statusBarHeight || 20)
 
    // iPhone X及以后机型导航栏高度会略高，可以根据机型调整
    if (systemInfo.model.includes('iPhone') && systemInfo.screenHeight >= 812) {
      setNavBarHeight(44)
    } else {
      setNavBarHeight(48)
    }
  }, [])
 
  return (
    <View>
      {/* 设置状态栏背景色和字体样式 */}
      <StatusBar backgroundColor="transparent" translucent barStyle="light-content" />
      
      {/* 状态栏占位，用于撑开布局 */}
      <View style={{ height: statusBarHeight, backgroundColor: '#108ee9' }} />
 
      {/* 导航栏主体 */}
      <View style={[styles.navbar, { height: navBarHeight }]}>
        <Text style={styles.title}>沉浸式导航栏</Text>
      </View>
    </View>
  )
}
 
const styles = StyleSheet.create({
  navbar: {
    backgroundColor: '#108ee9',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  }
})
 
export default ImmersiveNavbar

核心思路说明

• 获取状态栏高度
  通过 Taro.getSystemInfoSync() 获取当前设备的状态栏高度，动态设置顶部占位区域，使内容不会被状态栏遮挡。

• 调整导航栏高度
  根据不同设备（如 iPhone X 系列）调整导航栏高度，确保视觉效果统一且符合用户预期。

• 设置透明状态栏
  使用 <StatusBar translucent /> 设置为透明并覆盖在内容上，实现沉浸式效果。

• 布局设计
  先用一个空白 View 占据状态栏的空间，再渲染实际的导航条内容，使整体布局协调。

使用建议

• 若需要自定义返回按钮、菜单等功能，可在导航条中增加相应组件，并结合 Taro 的路由 API 实现页面跳转。
• 根据项目设计规范调整颜色、字体及间距，保证与整体 UI 风格一致。
• 注意适配不同平台和机型，尤其是 Android 和 iOS 状态栏表现差异较大时需单独处理。

以上代码可作为沉浸式导航栏的基础模板，根据具体业务需求进行扩展和优化。