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 Native中创建这种类型的导航标题标题？

Answer 1

如果您希望每个标签名称都位于顶部，请尝试以下操作：https://reactnavigation.org/docs/screen-options-resolution/

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

反应本机嵌套导航

1 个答案: