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

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

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

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

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

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

Вот мой App.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'
  }
}

react-native react-navigation react-navigation-v5
person arthurk33    schedule 28.02.2020    source источник
comment
попробуйте это, надеюсь, вам поможет ......   -  person Trịnh Đức Duy    schedule 28.02.2020
comment
Отвечает ли это на ваш вопрос? Как скрыть заголовок реагирующей навигации на одном экране   -  person Auticcat    schedule 28.02.2020
comment
Я искал отключить его во всем приложении. Выбранный ответ предусматривает оба способа сделать это, как в отдельности, так и в целом.   -  person arthurk33    schedule 13.03.2020

Ответы (3)


arrow_upward
16
arrow_downward

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

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

App.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

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

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

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

person Akila Devinda    schedule 28.02.2020
comment
@ arthurk33 Рад помочь вам - person Akila Devinda; 15.03.2020

arrow_upward
1
arrow_downward

Установка headerMode: none в качестве свойства по умолчанию удалит его с любого экрана.

const Stack = createStackNavigator();
Stack.Navigator.defaultProps = {
    headerMode: 'none',
};

Кроме того, я думаю, что вы также можете установить для свойства screenOptions headerShown значение false в качестве defaultProp, но это будет похоже на скрытие заголовка на каждом экране, а не на однократное выполнение.

person AlexanderD    schedule 14.10.2020

arrow_upward
0
arrow_downward

В React Navigation V5 добавьте options={{ title: "Sign Up", animationEnabled: false, headerShown: false }}

  <AuthStack.Screen
  name="SignupScreen"
  component={SignupScreen}
  options={{ title: "Sign Up", animationEnabled: false, headerShown: false }}
/>
person Menon Hasan    schedule 28.08.2020