Реагировать на собственную вложенную навигацию - PullRequest
Новая
       84

Реагировать на собственную вложенную навигацию

0 голосов
/ 17 апреля 2020 
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 вкладки.
Когда я нажимаю любую вкладку, я хочу изменить заголовок заголовок согласно табл.
Как создать заголовок навигационного заголовка этого типа в реагировать на родной язык?

1 Ответ

0 голосов
/ 17 апреля 2020

Если вы хотите, чтобы каждое имя вкладки было верхним, попробуйте следующее: https://reactnavigation.org/docs/screen-options-resolution/

Проверьте функцию getHeaderTitle и приведенный ниже оператор switch - это помогло мне достичь этого behavoir.

...