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 个标签。
当我单击任何选项卡时，我想根据选项卡更改标题标题。
如何在本机反应中创建这种类型的导航标题标题？

标签： react-nativereact-routerreact-native-navigation

Answer 1

如果您想让每个选项卡名称都位于顶部，请尝试以下操作：https ://reactnavigation.org/docs/screen-options-resolution/

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