React Navigation嵌套TabNavigator自定义头部实现咨询

针对你描述的嵌套导航需求，我会基于 React Navigation v6（当前主流版本）给出具体实现方案，核心思路是为嵌套的顶部 Tab 子屏幕单独配置自定义头部，同时保证和底部 Tab 导航的协调工作。

第一步：搭建基础导航结构 #

首先我们需要创建三层导航结构：底部 Tab 导航器 → 视频 Tab 对应的顶部 Tab 导航器 → 各个子屏幕（All、Favourites）。

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { useState, useEffect } from 'react';
import { useHeaderHeight } from '@react-navigation/elements';

// 初始化导航器
const BottomTab = createBottomTabNavigator();
const VideoTopTab = createMaterialTopTabNavigator();

// 其他底部Tab的示例屏幕
function HomeScreen() {
  return <View style={styles.screen}><Text>Home Tab</Text></View>;
}

function ProfileScreen() {
  return <View style={styles.screen}><Text>Profile Tab</Text></View>;
}

第二步：实现视频 Tab 的嵌套顶部导航 #

在视频 Tab 对应的导航器中，我们为两个子屏幕分别配置差异化头部：

1. 「All」子 Tab：带搜索栏的自定义头部

我们直接替换默认的 header 为包含搜索栏的自定义视图，同时用 useHeaderHeight 保证和默认头部高度一致：

function AllVideosScreen({ route }) {
  // 可以从父组件接收搜索关键词，用于后续搜索逻辑
  const { searchQuery } = route.params;
  return (
    <View style={styles.screen}>
      <Text>All Videos - Searching: {searchQuery}</Text>
    </View>
  );
}

2. 「Favourites」子 Tab：带 Edit/Done 按钮的头部

通过 navigation.setOptions 动态更新右上角按钮的文本，结合本地状态管理编辑模式：

function FavouriteVideosScreen({ navigation }) {
  const [isEditing, setIsEditing] = useState(false);

  // 监听编辑状态变化，动态更新头部按钮
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          onPress={() => setIsEditing(!isEditing)}
          style={styles.editButton}
        >
          <Text style={styles.editButtonText}>{isEditing ? 'Done' : 'Edit'}</Text>
        </TouchableOpacity>
      )
    });
  }, [isEditing, navigation]);

  return (
    <View style={styles.screen}>
      <Text>{isEditing ? 'Editing Mode Active' : 'Your Favourite Videos'}</Text>
    </View>
  );
}

3. 组合顶部 Tab 导航器

function VideoTopTabs() {
  const [searchQuery, setSearchQuery] = useState('');
  const headerHeight = useHeaderHeight();

  return (
    <VideoTopTab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#007AFF',
        tabBarIndicatorStyle: { backgroundColor: '#007AFF' }
      }}
    >
      <VideoTopTab.Screen
        name="All"
        component={AllVideosScreen}
        initialParams={{ searchQuery }}
        options={{
          // 自定义All Tab的头部
          header: () => (
            <View style={[styles.customHeader, { height: headerHeight }]}>
              <TextInput
                placeholder="Search videos..."
                value={searchQuery}
                onChangeText={setSearchQuery}
                style={styles.searchInput}
              />
            </View>
          )
        }}
      />
      <VideoTopTab.Screen
        name="Favourites"
        component={FavouriteVideosScreen}
        options={{
          headerTitle: 'My Favourites'
        }}
      />
    </VideoTopTab.Navigator>
  );
}

第三步：组合底部 Tab 导航器 #

最后把所有导航器组合起来，形成完整的导航结构：

export default function App() {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen name="Home" component={HomeScreen} />
        <BottomTab.Screen name="Videos" component={VideoTopTabs} />
        <BottomTab.Screen name="Profile" component={ProfileScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  );
}

// 样式辅助
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  customHeader: {
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    paddingHorizontal: 10,
    justifyContent: 'center'
  },
  searchInput: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 8
  },
  editButton: {
    marginRight: 15
  },
  editButtonText: {
    color: '#007AFF',
    fontSize: 16,
    fontWeight: '500'
  }
});

关键注意事项 #

• 状态管理：搜索栏的状态可以放在顶部 Tab 导航器中，通过 initialParams 传递给子屏幕，方便后续实现搜索逻辑。
• 头部高度一致性：使用 useHeaderHeight 钩子确保自定义头部和默认头部高度匹配，避免布局错乱。
• 动态头部更新：通过 navigation.setOptions 可以在屏幕内部动态修改头部配置，比如 Edit/Done 按钮的切换。

内容的提问来源于stack exchange，提问作者ZeroBased_IX