javascript - imprimir - Ocultar encabezado en el navegador de pila Reaccionar navegación

quitar encabezado al imprimir html

Question

Estoy tratando de cambiar la pantalla usando el navegador de pila y tabulador.

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

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

navigationOptions: { header: { visible: false } }

Estoy probando este código en los dos primeros componentes que están usando en stacknavigator. si uso esta línea, obtengo algún error como ::

Answer 1

¡En tu pantalla objetivo tienes que codificar esto!

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

Answer 2

Esto funcionó para mí:

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

Answer 3

Estoy usando header : null lugar de header : { visible : true } estoy usando react-native cli. Este es el ejemplo:

static navigationOptions = { header: null } 

Answer 4

Lo uso 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, estará oculto 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,
  }
 }
);

Answer 5

Si alguien busca cómo alternar el encabezado de modo 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 termina el trabajo:

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

Answer 6

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

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

Answer 7

Si tu pantalla es un componente de clase

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

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

Answer 8

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

 static navigationOptions = { header: null }

Answer 9

Simplemente use el código a continuación en la página donde desea ocultar el encabezado

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

consulte el Navegador de pila

Answer 10

Tengo el mismo problema, pero hice mi trabajo de encabezado en las clases individuales usando navigationOptions y estoy usando createBottomTabNavigator cuyo encabezado es visible y el encabezado de clases no es visible. He intentado todo como headerMode: none , header: null etc., pero no pude ocultar el encabezado de bottomTabNavigator .

Answer 11

Toda la respuesta muestra cómo hacerlo con los componentes de la clase, pero para los componentes funcionales lo hace:

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

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

Si elimina 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 eliminar el encabezado.

Answer 12

Utilizar

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

en clase / componente como

static navigationOptions = {
   header : null   
};

Answer 13

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,

};