0

Tengo un problema con una de mis aplicaciones desarrolladas con React Native y Expo.

El problema es que el header no se está mostrando.

Este es mi código:

import React from 'react';

import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableHighlight
} from 'react-native';

export default class NoticePrivacyScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: ('',
        <Text style={styles.headerHeader}> Aviso de privacidad </Text>
      ),

      headerLeft: (
        <TouchableHighlight onPress={navigation.getParam('Menu')}>
          <Image style={{ width: 30, height: 30 }}
            source={require('../images/backButton.png')}
          />
        </TouchableHighlight>
      )
    }
  }

  componentDidMount() {
    this.props.navigation.setParams({ Menu: this._goMenu });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View>
          <Text style={styles.headerPrivacy}>
            Mi texto
          </Text>
        </View>
      </ScrollView>
    )
  }
  _goMenu = async () => {
    this.props.navigation.navigate('Menu');
  }
}

En mi Home Screen tengo un header que sí se muestra correctamente.

Entonces para saber si era alguna cosa que no podía notar en mi código, hice una copia de esa pantalla que sí lo mostraba y redirigí el botón hacia ese clon. Y me sorprendió mucho que un clon del que sirve, no se mostrara el header.

Les muestro:

Aquí se muestra el header, todo beien Header

Al momento de navegar hacia una pantalla que es un clon de la de arriba, el header desaparece No header

Alguien sabe qué es lo que podría estar pasando? Gracias

2 respuestas 2

0

Necesitaría ver todo tu código para darte una respuesta exacta a tu problema. Pero por lo que puedo ver estas utilizando estas utilizando un DrawerNavigator para el menú lateral, el problema es que el DrawerNavigator no tiene ningún header.

Si quieres que aparezca un header en cada página con un menú lateral tendrías que planificar bien la navegación de tu app, por ejemplo, para cada pantalla que llamas en el menú lateral, tendrías que crear un StackNavigator

Puedes hacerlo de la siguiente manera

    const stackPantalla1 = createDrawerNavigator(
      {
        root: RootScreen,
        one: SoneScreen, 
      }
    )

    const stackPantalla2 = createDrawerNavigator(
      {
        root2: RootScreen,
        one2: SoneScreen, 
      }
    )

   const Drawer = createDrawerNavigator(
      {
        stack1: { screen: stackPantalla1 },
        stack2: { screen: stackPantalla2 }
      },
      {
        initialRouteName: "stack1"
      }
   );


2
  • No es un drawer navigator como tal, es simulado. Es una imagen de hamburguer icon que te redirige a una pantalla. Funcionaba perfectamente cuando trabajaba con mi proyecto de react-native init. Es un clon prácticamente
    – Chris
    el 2 jun. 2019 a las 7:13
  • Como te dije tendría que ver todo tu código para encontrar el problema. Asegúrate también de incluir el static NavigationOptions en todas tus pantallas donde quieras ver ese header
    – lucf25
    el 2 jun. 2019 a las 15:20
0

En caso de que la implementación “normal” del header llegué a fallar en Expo, mi mejor recomendación es la instalación de la paquetería react-native-elements. Tiene una implementación muy sencilla para el header. Además de contar con iconos y demás elementos complejos de UI para hacer de la interfaz de la aplicación, mejor fluida, más fácil de implementar y más llamativa para el usuario

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.