Nascondi intestazione nel navigatore dello stack React navigation


137

Sto cercando di cambiare schermata utilizzando sia lo stack che il navigatore a schede.

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

In questo caso viene utilizzato prima stacknavigator e poi tabnavigator. e voglio nascondere le intestazioni del navigatore dello stack. WNon funziona correttamente quando utilizzo opzioni di navigazione come:

navigationOptions: { header: { visible: false } }

Sto provando questo codice sui primi due componenti che stanno usando in stacknavigator. se uso questa riga, ottengo un errore come:

inserisci qui la descrizione dell'immagine

Risposte:


330

AGGIORNAMENTO dalla versione 5

A partire dalla versione 5 è l'opzione headerShowninscreenOptions

Esempio di utilizzo:

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

Se desideri nascondere solo l'intestazione su 1 schermata, puoi farlo impostando screenOptions sul componente dello schermo vedi sotto per esempio:

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

Vedi anche il blog sulla versione 5

AGGIORNAMENTO
A partire dalla versione 2.0.0-alpha.36 (2019-11-07),
c'è una nuova opzione di navigazione:headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

Vecchia risposta

Lo uso per nascondere la barra dello stack (notare che questo è il valore del secondo parametro):

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

Quando usi questo metodo, sarà nascosto su tutti gli schermi.

Nel tuo caso sarà simile a questo:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Funziona perfettamente! grazie per la tua risposta ma ho un problema dopo aver aggiunto questo che è :: passare da stacknavigator a tabnavigator funziona bene. se voglio mostrare l'intestazione quando passo da tabnavigator a stacknaviagtor cosa devo fare?
Avijit Dutta

2
Hmm, questa è un'ottima domanda. Ad essere onesto, non lo so. Puoi provare la risposta @Dpkstr sullo schermo in cui vuoi mostrarlo, invece di null sarebbe vero.
Perry

Hmm, l'ho già provato ma anche non funzionava ... grazie per la tua prima risposta. Per ora realizzerò la seconda funzionalità utilizzando un pulsante.
Avijit Dutta

come mostrare e nascondere dinamicamente l'intestazione quando si fa clic sul pulsante all'interno del componente. Se diamo static navigationOptions = {header: null}. Nasconderò completamente l'intestazione. Voglio mostrare o nascondere quando clicco su qualche pulsante
Venkatesh Somu

1
Se vuole nascondere l'intestazione per una schermata specifica in v5 + dovrebbe usare optionsprop in questo modo<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

Usa semplicemente il codice sottostante nella pagina in cui desideri nascondere l'intestazione

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

fare riferimento a Stack Navigator


Va bene, ma un problema è che quando lo schermo passa a tabNavigator da stacknavigator (come da menzione sui componenti della mia domanda come la schermata di verifica OTP alla schermata dell'elenco in quel momento vengono visualizzate entrambe le intestazioni
Avijit Dutta

Puoi dirmi esattamente come stai navigando su List
Dpkstr

22

Basta aggiungerlo allo snippet di codice della classe / componente e l'intestazione verrà nascosta

 static navigationOptions = { header: null }

16

Se il tuo schermo è un componente di classe

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

codificalo nella schermata di destinazione come primo metodo (funzione).


1
giusto, header: () => nullè il modo corretto, altrimenti si ottiene un glitch di intestazione durante il caricamento della pagina
Cristian Tr

11

Se vuoi nasconderti su una schermata specifica, fai così:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

10

Sto usando header : nullinvece di header : { visible : true }usare cli nativo di reazione. questo è l'esempio:

static navigationOptions = {
   header : null   
};

10

Nella soluzione data l'intestazione è nascosta per HomeScreen da- opzioni = {{headerShown: false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

9

Aggiungi un nuovo oggetto navigationOptions nello stackNavigator.

Prova questo :

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 } }
});

Spero che sia d'aiuto.


7

Se qualcuno cerca come attivare / disattivare l'intestazione, quindi in componentDidMount scrivi qualcosa come:

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

quando

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>
    };
};

E da qualche parte quando l'evento finisce il lavoro:

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

6

Questo ha funzionato per me:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

4

Nella tua schermata mirata devi codificare questo!

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

4

Puoi nascondere l'intestazione in questo modo:

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

3

Funziona per la navigazione nello stack

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

2

Se vuoi rimuoverlo solo da una schermata in react-native-navigationallora:

<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

Tutte le risposte mostrano come farlo con i componenti di classe, ma per i componenti funzionali lo fai:

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

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

Se rimuovi l'intestazione, il tuo componente potrebbe trovarsi in punti in cui non puoi vederlo (quando il telefono non ha lo schermo quadrato), quindi è importante utilizzarlo quando rimuovi l'intestazione.


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 }} per me va bene.

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


1

In React Navigation 5.x puoi nascondere l'intestazione di tutte le schermate impostando il headerModeprop del Navigatora false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

1

Puoi nascondere l'intestazione StackNavigator in questo modo:

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

È importante abbinare la versione della libreria di navigazione reattiva che stai utilizzando alla soluzione poiché sono tutte diverse. Per coloro che usano ancora la navigazione per la reazione v1.0.0 per qualche motivo come me, hanno funzionato entrambi:

Per disabilitare / nascondere l'intestazione su singole schermate:

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

Per disabilitare / nascondere tutti gli schermi contemporaneamente, usa questo:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

0

Nell'ultima versione di React-Navigation questo funziona per nascondere l'intestazione su ogni schermata: headerMode = {'none'}

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


0

per 4.x, il header: nullè deprecato, dovrebbe usare headerShown: falseinvece

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

0
  1. Per la schermata singola, puoi impostare header: null o headerShown: false in createStackNavigator in questo modo

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Nascondi l'intestazione da tutte le schermate in una volta utilizzando defaultNavigationOptions

    const App = createStackNavigator({
    
    First: {
      screen: HomeActivity,
    },
    },
    
    {
    defaultNavigationOptions: {
      header: null
    },
    
    });

0

se vuoi rimuovere l'intestazione da tutta la schermata vai a app.js e aggiungi questo codice a Stack.Navigator

screenOptions={ { headerShown: false } }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.