Ocultar encabezado en el navegador de pila React navigation


137

Estoy intentando cambiar de pantalla usando el navegador de pila y de pestañas.

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

En este caso, se usa stacknavigator primero y luego tabnavigator. y quiero ocultar los encabezados del navegador de pila. No funciona correctamente cuando utilizo opciones de navegación como:

navigationOptions: { header: { visible: false } }

Estoy probando este código en los dos primeros componentes que se utilizan en stacknavigator. si uso esta línea, aparece un error como:

ingrese la descripción de la imagen aquí

Respuestas:


330

ACTUALIZAR a partir de la versión 5

A partir de la versión 5 es la opción headerShownenscreenOptions

Ejemplo de uso:

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

Si solo desea ocultar el encabezado en 1 pantalla, puede hacerlo configurando las opciones de pantalla en el componente de pantalla, vea a continuación, por ejemplo:

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

Ver también el blog sobre la versión 5

ACTUALIZACIÓN
A partir de la versión 2.0.0-alpha.36 (2019-11-07),
hay una nueva opción de navegación:headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

Respuesta antigua

Utilizo esto para ocultar la barra de la pila (observe que este es el valor del segundo parámetro):

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

Cuando utilice este método, se ocultará en todas las pantallas.

En su caso se verá así:

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

¡Funciona perfectamente! gracias por su respuesta, pero tengo un problema después de agregar esto que es: cambiar stacknavigator a tabnavigator funciona bien. Si quiero mostrar el encabezado cuando cambio de pantalla de tabnavigator a stacknaviagtor, ¿qué debo hacer?
Avijit Dutta

2
Hmm, esa es una gran pregunta. Para ser honesto, no lo sé. Puede probar la respuesta @Dpkstr en la pantalla que desea mostrar, en lugar de nula sería verdadera.
Perry

Hmm, ya probé esto pero tampoco funcionaba ... gracias por tu primera respuesta. Haré la segunda funcionalidad usando un botón solo por ahora.
Avijit Dutta

cómo mostrar y ocultar el encabezado dinámicamente al hacer clic en el botón dentro del componente. Si le damos static navigationOptions = {header: null}. Ocultaré el encabezado por completo. Quiero mostrar u ocultar cuando hago clic en algún botón
Venkatesh Somu

1
Si quiere ocultar el encabezado para una pantalla específica en v5 +, debe usar un optionsaccesorio como este<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

Simplemente use el siguiente código en la página en la que desea ocultar el encabezado

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

consulte Stack Navigator


Funciona bien, pero un problema es que cuando la pantalla cambia a tabNavigator desde stacknavigator (según la mención en los componentes de mi pregunta, como la pantalla de verificación de OTP a la pantalla de lista, en ese momento se muestran ambos encabezados
Avijit Dutta

¿Puede decirme exactamente cómo está navegando a List
Dpkstr

22

Simplemente agregue esto en su fragmento de código de clase / componente y el encabezado se ocultará

 static navigationOptions = { header: null }

16

Si su pantalla es un componente de clase

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

codifique esto en su pantalla de destino como el primer método (función).


1
correcto, header: () => nulles la forma correcta, de lo contrario, obtendrá un error de encabezado al cargar la página
Cristian Tr

11

Si desea ocultarse en una pantalla específica, haga lo siguiente:

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

10

Estoy usando en header : nulllugar de header : { visible : true }usar react-native cli. este es el ejemplo:

static navigationOptions = {
   header : null   
};

10

En la solución dada, el encabezado está oculto para HomeScreen por- options = {{headerShown: false}}

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

9

Agregue un nuevo objeto navigationOptions en stackNavigator.

Prueba esto :

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

Espero eso ayude.


7

Si alguien busca cómo alternar el encabezado en componentDidMount, escriba algo como:

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

Cuando

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

Y en algún lugar cuando el evento termine el trabajo:

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

6

Esto funcionó para mí:

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

4

¡En su pantalla de destino, debe codificar esto!

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

4

Puede ocultar el encabezado como este:

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

3

Esto funciona para la navegación de pila

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

2

Si solo desea eliminarlo de una pantalla en, react-native-navigationentonces:

<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

Todas las respuestas muestran cómo hacerlo con componentes de clase, pero para los componentes funcionales lo hace:

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

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

Si quita el encabezado, su componente puede estar en lugares donde no puede verlo (cuando el teléfono no tiene pantalla cuadrada), por lo que es importante usarlo al quitar el encabezado.


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 }} funciona para mi.

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


1

En react navigation 5.x puede ocultar el encabezado de todas las pantallas configurando el headerModeaccesorio de Navigatorto false.

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

1

Puede ocultar el encabezado StackNavigator de esta manera:

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

Es importante hacer coincidir la versión de la biblioteca de navegación de reacción que está utilizando con la solución, ya que todas son diferentes. Para aquellos que todavía usan react-navigation v1.0.0 por alguna razón como yo, ambos funcionaron:

Para deshabilitar / ocultar el encabezado en pantallas individuales:

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

Para deshabilitar / ocultar todas las pantallas a la vez, use esto:

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

0

En la última versión de react-navigation, esto funciona para ocultar el encabezado en cada pantalla: headerMode = {'none'}

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


0

para 4.x, header: nullestá obsoleto, debería usar headerShown: falseen su lugar

ex:

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

0
  1. Para la pantalla única, puede establecer header: null o headerShown: false en createStackNavigator así

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Oculte el encabezado de todas las pantallas una vez usando defaultNavigationOptions

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

0

si desea eliminar el encabezado de todas las pantallas, vaya a app.js y agregue este código a Stack.Navigator

screenOptions={ { headerShown: false } }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.