0

Tengo el siguiente código pero no genera ningún icono al cargarlo pero tampoco un error

    import { createAppContainer,createMaterialTopTabNavigator } from 'react-navigation';
import Buscar from './Buscar';
import Menu from './Menu';
import Principal from './Principal';
import Icon from 'react-native-vector-icons/Ionicons'




const TabPrincipal=createMaterialTopTabNavigator({

    Principal:{
        screen:Principal,


    },  
    Menu:{
        screen:Menu,
        navigationOptions:{
            tabBarIcon: ({ focused, tintcolor }) => (
              <Icon name="reorder" size={24}  />
            )
          }
    },


},);

export default createAppContainer(TabPrincipal);  

la opcion de menu es un createDrawerNavigator, lo que busco es cambiar el nombre menú por un icono pero, no se la manera es la correcta

6
  • Seguro que corriste el comando react-native link react-native-vector-icons e instalaste todo tal como la documentación indica? Commented el 10 jun. 2019 a las 21:54
  • si, corrí el comando npm install --save react-native-vector-icons como lo indica npmjs.com/package/react-native-vector-icons pero aun así no me muestra ni icono ni un error Commented el 11 jun. 2019 a las 17:10
  • El comando que yo te indico que corras es distinto al que me dices que corriste Commented el 11 jun. 2019 a las 17:22
  • sí, intente el comando que usted me dijo, y pues no lo reconoce Commented el 11 jun. 2019 a las 18:48
  • Qué te sale cuando corres el comando? Commented el 11 jun. 2019 a las 19:23

1 respuesta 1

1

En la documentación sobre 'createMaterialTopTabNavigator' puede leer lo siguiente:

tabBarOptions - An object with the following properties:

...

showIcon - Whether to show icon for tab, default is false.

Por tanto, añade tabBarOptions a la configuración de createMaterialTopTabNavigator y habilita la visualización de iconos. Quedaría algo tal que:

const TabPrincipal = createMaterialTopTabNavigator({
  Principal: {
    screen: Principal,
  },
  Menu: {
    screen: Menu,
    navigationOptions: {
      tabBarIcon: ({ focused, tintcolor }) => (
        <Icon name="reorder" size={24} />
      )
    }
  },
}, {
    tabBarOptions: {
      showIcon: true,
    }
  });

Tu Respuesta

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

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