Ocultar encabezado en el navegador de pila React navigation

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:

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

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

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

 static navigationOptions = { header: null }

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

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

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

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

static navigationOptions = {
   header : null   
};

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>

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.

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

Esto funcionó para mí:

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

¡En su pantalla de destino, debe codificar esto!

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

Puede ocultar el encabezado como este:

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

Esto funciona para la navegación de pila

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

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

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

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,

};

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.

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

 <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",

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>

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

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

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>

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

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

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

screenOptions={ { headerShown: false } }