Скрыть заголовок в навигаторе стека React navigation

141

Я пытаюсь переключить экран с помощью навигатора стека и вкладок.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

В этом случае сначала используется stacknavigator, а затем tabnavigator. и я хочу скрыть заголовки навигатора стека. W Он не работает должным образом, когда я использую такие параметры навигации, как ::

navigationOptions: { header: { visible: false } }

Я пробую этот код на первых двух компонентах, которые используются в stacknavigator. если я использую эту строку, то получаю некоторую ошибку, например:

введите описание изображения здесь

Авиджит Дутта
источник

Ответы:

340

ОБНОВЛЕНИЕ с версии 5

Начиная с версии 5 это опция headerShownвscreenOptions

Пример использования:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Если вы хотите скрыть только заголовок на одном экране, вы можете сделать это, установив screenOptions в компоненте экрана, см. Ниже, например:

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

Смотрите также блог о версии 5

ОБНОВЛЕНИЕ
Начиная с версии 2.0.0-alpha.36 (2019-11-07)
появилась новая опция навигации:headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Старый ответ

Я использую это, чтобы скрыть панель стека (обратите внимание, что это значение второго параметра):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Когда вы используете этот метод, он будет скрыт на всех экранах.

В вашем случае это будет выглядеть так:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);
Перри
источник
Работает отлично! спасибо за ваш ответ, но у меня возникла одна проблема после добавления этого: переключение stacknavigator на tabnavigator, он работает нормально. если я хочу отображать заголовок при переключении экрана с tabnavigator на stacknaviagtor, что мне делать?
Avijit Dutta
2
Хм, это отличный вопрос. Если честно, я этого не знаю. Вы можете попробовать ответить @Dpkstr на экране, который вы хотите показать, вместо нуля, это будет правда.
Перри
Хм, я уже пробовал это, но это тоже не сработало ... спасибо за первый ответ. Я пока сделаю второй функционал с помощью кнопки.
Avijit Dutta
как отображать и скрывать заголовок динамически при нажатии кнопки внутри компонента. Если мы дадим static navigationOptions = {header: null}. Я полностью скрою заголовок. Я хочу показать или скрыть, когда нажимаю на какую-нибудь кнопку
Венкатеш Сому
1
Если он хочет скрыть заголовок для определенного экрана в v5 +, следует использовать optionsтакую ​​опору<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Оливер Д.
130

Просто используйте приведенный ниже код на странице, где вы хотите скрыть заголовок.

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

обратитесь к Stack Navigator

Dpkstr
источник
Это нормально, но одна проблема заключается в том, что при переключении экрана на tabNavigator из stacknavigator (в соответствии с упоминанием в моем вопросе компонентов, таких как экран OTPverification, для отображения экрана в это время отображаются оба заголовка
Avijit Dutta
Можете ли вы сказать мне, как именно вы
переходите
22

Просто добавьте это в свой фрагмент кода класса / компонента, и заголовок будет скрыт

 static navigationOptions = { header: null }
Вайбхав Бакчав
источник
16

Если ваш экран является компонентом класса

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

закодируйте это на целевом экране как первый метод (функцию).


источник
1
правильно, header: () => nullэто правильный способ, иначе вы получите сбой заголовка при загрузке страницы
Cristian Tr
11

Если вы хотите спрятаться на определенном экране, сделайте так:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}
Waqar UlHaq
источник
11

В данном решении заголовок скрыт для HomeScreen by- options = {{headerShown: false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>
Абхишек Кумар
источник
10

Я использую header : nullвместо того, чтобы header : { visible : true }использовать cli с поддержкой реакции. вот пример:

static navigationOptions = {
   header : null   
};
Cevin Ways
источник
9

Добавьте новый объект navigationOptions в stackNavigator.

Попробуй это :

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Надеюсь, поможет.

Нараян Шрестха
источник
7

Если кто-то ищет, как переключить заголовок, поэтому в componentDidMount напишите что-то вроде:

  this.props.navigation.setParams({
      hideHeader: true,
  });

когда

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

И где-нибудь, когда событие закончит работу:

this.props.navigation.setParams({
  hideHeader: false,
});
Эрнестино
источник
6

Это сработало для меня:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);
Диего Санта-Крус Мендесу
источник
4

На вашем целевом экране вы должны это закодировать!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }
Pheng Sengvuthy
источник
4

Вы можете скрыть заголовок так:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />
Арун Д Намбиссан
источник
3

Это работает для навигации по стеку

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>
Шейан Сандаруван
источник
2

Если вы хотите удалить его только с одного экрана react-native-navigation:

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>
Мехди Раза
источник
1
const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};
Дональд
источник
1

Все ответы показывают, как это сделать с компонентами класса, но для функциональных компонентов вы делаете:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Если вы удалите заголовок, ваш компонент может оказаться в местах, где вы его не видите (когда у телефона нет квадратного экрана), поэтому важно использовать его при удалении заголовка.

Vencovsky
источник
1
const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions
Фаррух Таквим Хайдер
источник
1
 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} работает для меня.

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",

Mainak
источник
1

В React Navigation 5.x вы можете скрыть заголовок для всех экранов, установив headerModeсвойство Navigatorв false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>
Аджай Сиван
источник
1

Вы можете скрыть заголовок StackNavigator следующим образом:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}
Пареш Чавда
источник
0

Важно согласовать, какую версию библиотеки реагирования-навигации вы используете, с решением, поскольку все они разные. Для тех, кто по какой-то причине, как и я, все еще использует response-navigation v1.0.0, оба они работали:

Для отключения / скрытия заголовка на отдельных экранах:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

Для отключения / скрытия сразу всех экранов используйте это:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);
Эдвард Тан
источник
0

В последней версии response-navigation это работает, чтобы скрыть заголовок на каждом экране: headerMode = {'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>

ласковый
источник
0

для 4.x header: nullустаревший, следует использовать headerShown: falseвместо

например:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})
бензин
источник
0
  1. Для одного экрана вы можете установить header: null или headerShown: false в createStackNavigator следующим образом

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Скрыть заголовок со всех экранов сразу, используя defaultNavigationOptions

    const App = createStackNavigator({
    
    First: {
      screen: HomeActivity,
    },
    },
    
    {
    defaultNavigationOptions: {
      header: null
    },
    
    });
Manan
источник
0

если вы хотите удалить заголовок со всего экрана, перейдите к app.js и добавьте этот код в Stack.Navigator

screenOptions={ { headerShown: false } }
Мехрад Фаранак
источник