Удалить заголовок React Navigation v5 - PullRequest
Новая
       5

Удалить заголовок React Navigation v5

0 голосов
/ 28 февраля 2020

Кажется, я не могу настроить заголовок на NULL в новой версии React Navigation. Я могу установить его прозрачным, используя опцию headerTransparent, но похоже, что заголовок все еще там, так как экран все еще требует имени.

Вот то, что я имел изначально, используя шаблон, который поставляется с новым приложением Expo

И это то, что выглядит как с прозрачным заголовком . По сути, это то, что я хочу увидеть, но название все еще здесь.

Я не хочу заголовок с моей навигацией, но это похоже на поведение по умолчанию. Я попытался просмотреть документацию, чтобы увидеть, была ли такая подпорка для удаления заголовка, но обнаружил страницу 404 для вариантов: https://reactnavigation.org/docs/en/navigation-options.html

Я новичок в React Native, поэтому может быть, я что-то недопонимаю. Но документация по этому вопросу неясна, и я не смог найти вопрос о переполнении стека, который бы непосредственно касался этого.

Вот мое приложение. js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';

const Stack = createStackNavigator();

........

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
  <Stack.Navigator>
    <Stack.Screen name="root" component={BottomTabNavigator} options={{headerTransparent: true}}/>
  </Stack.Navigator>
</NavigationContainer>

Вот мой BottomTabNavigator. js, что очень похоже на код шаблона, который предоставляет expo. 

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/Home';
import SearchScreen from '../screens/Search';

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'Home';

export default function BottomTabNavigator({ navigation, route }) {
  navigation.setOptions({ headerTitle: getHeaderTitle(route) });
  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-home" />
        }}
      />
      <BottomTab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          title: 'Search',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-search" />,
        }}
      />
    </BottomTab.Navigator>
  );
}

function getHeaderTitle(route) {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

  switch (routeName) {
    case 'Home':
      return 'How to get started';
    case 'Appointments':
      return 'Your appointments';
    case 'Search':
      return 'Search for services';
    case 'Account':
      return 'Account'
  }
}

1 Ответ

4 голосов
/ 28 февраля 2020

В вашем сценарии у вас есть два варианта. Либо вы можете отключить заголовок для всех экранов, либо отключить заголовок только для выбранного экрана.

Чтобы отключить заголовок для универсального приложения, отредактируйте ваше приложение. js как этот

Приложение. js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';

const Stack = createStackNavigator();

........

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
  <Stack.Navigator screenOptions={{headerShown: false,}}>
    <Stack.Screen name="root" component={BottomTabNavigator}/>
  </Stack.Navigator>
</NavigationContainer>

Вам необходимо передать screenOptions в Stack.Navigator и сделать headerShown: false

Предположим, что вы хотите отключить заголовок только на указанном c экране, тогда этот пример поможет вам 

<Stack.Navigator ...>
 ...
  <Stack.Screen
    name="Landing"
    component={LandingScreen}
    options={{
      headerShown: false, // change this to `false`
    }}
  />
...
</Stack.Navigator>

Надеюсь, у вас есть четкое представление об этом :)

...