headerMode vagy headerShown

A headerMode és a headerShown tulajdonságokkal lehet megjeleníteni vagy elrejteni a ReactNative-os képernyők fejlécét.

A fejlécben lehetnek navigációs gombok, ikonok, a képernyőnek a címe. De a fejlécet nem kötelező megjeleníteni. Ha üresen szeretnénk hagyni, azt is megtehetjük.

Az alapértelmezett beállítás a true, vagyis a fejléc megjelenik, ahogy itt is:

Melyiket használd?

Nos a jó hír, hogy ezek közül elég csak egyet használni, ugyanis a headerMode használata elavult. Tehát, ha ezt írod a kódba:

<Stack.Navigator <strong>headerMode="none"</strong>>

Akkor kapsz egy ilyen figyelmeztetést a konzolban:

Stack Navigator: 'headerMode="none"' is deprecated. Use 'headerShown: false' in 'screenOptions' instead.

A figyelmeztető üzenetben ott van a megoldási javaslat is. A headerShown tulajdonságot kell használni a screenOptions képernyő konfigurációs objektumon belül.

Tehát a headerMode-ot felejtsük el és használjuk a headerShown-t helyette!

Fejléc be-, ki kapcsolása minden képernyőn

Amennyiben azt akarjuk elérni, hogy egy Stack-en belüli összes képernyőre érvényes legyen a beállítás, akkor azt a Stack.Navigator-hoz kell tenni:

<Stack.Navigator <strong>screenOptions={{ headerShown: false }}</strong>>

Fejléc be-, ki kapcsolása egy bizonyos képernyőn

Lehetőség van arra, hogy a fejléc megjelenítését képernyőnként definiáljuk. Ebben az esetben az adott képernyő options objektumában belül adjuk meg a headerShown tulajdonságot:

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home', <strong>headerShown: false</strong> }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

headerShown használata több helyen

A kettő (screenOptions és options) kombinációja adja a lehetőséget arra, hogy az összes képernyőn tiltsuk és csak adott képernyő(kö)n engedélyezzük a fejléc megjelenítését.

Ebben az esetben a Stack.Navigator screenOptions objektumába megy a headerShown: false, és az adott képernyő options objektumába pedig a headerShown: true

    <Stack.Navigator <strong>screenOptions={{ headerShown: false }}</strong>>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home', <strong>headerShown: true </strong>}}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>