React Native 嵌套导航

Question

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import {MaterialCommunityIcons,Feather} from '@expo/vector-icons';
import {VideoTab} from './VideoTab';
import {EbookTab} from './EbookTab';
import {TestTab} from './TestTab';
import {NotesTab} from './NotesTab';
const Bottom = createMaterialBottomTabNavigator();
export  const BottomNav = ({navigation,route})=>{
    return (
    <Bottom.Navigator
      initialRouteName="VideoTab"
      activeColor="#1ca6d1"
      inactiveColor="red"
      labeled='true'
      barStyle={{ backgroundColor: '#ffffff' }}
       >
      <Bottom.Screen
        name="VideoTab"
        component={VideoTab}
        options={{
          title:'Video',
          tabBarLabel: 'Class',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="lightbulb-on-outline" color={color} size={26} />
          ),
        }}
      />
      <Bottom.Screen
        name="NotesTab"
        component={NotesTab}
        options={{
          title:'Notes',
          tabBarLabel: 'Notes',
          tabBarIcon: ({ color }) => (
            <Feather name="book" color={color} size={26} />
          ),
        }}
      />
      <Bottom.Screen
        name="EbookTab"
        component={EbookTab}
        options={{
          tabBarBadge:true,
          title:'Ebook',
          tabBarLabel: 'QuestionBank',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
      <Bottom.Screen
        name="TestTab"
        component={TestTab}
        options={{
          title:'Test',
          tabBarLabel: 'Test',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />      
    </Bottom.Navigator>
  );
}

并且这个底部导航位于堆栈导航器中。
每个屏幕名称都是一个标签屏幕，每个标签屏幕包含3个标签。
当我单击任何选项卡时，我想根据选项卡更改 header 标题。
如何在 React Native 中创建这种类型的导航 header 标题？

Answer 1

如果你想让每个选项卡名称都位于顶部，试试这个：https://reactnavigation.org/docs/screen-options-resolution/

查看 getHeaderTitle 函数和下面的 switch 语句 - 它帮助我实现了这个行为。

React Native 嵌套导航

React Native Nested Navigation

react-router

react-native

react-native-navigation