los iconos de vectores nativos de reacción no se mostrarán en el dispositivo Android

4 minutos de lectura

Avatar de usuario de Theodore
teodoro

Usé react-native-vector-icons en mi proyecto nativo de reacción e inicié la aplicación con npm start.

Los íconos se muestran normalmente en iOS, pero no se mostrarán en Android.

Cosas que probé:

  • tres métodos en el documento de react-native-vector-icons (finalmente puedo ver los archivos *.tff en la carpeta de fuentes)
  • usar react-native run-android para iniciar la aplicación. El ícono se muestra normal, pero lo que quiero es integrar React Native con mi aplicación de Android existente, no una aplicación totalmente RN.
  • use el archivo jsbundle en lugar del servidor de depuración en mi aplicación

Ninguno de los anteriores funciona

Entonces, ¿debería agregar algo a mi aplicación de Android existente?

no se como solucionar este problema


[email protected]

[email protected]

[email protected]

node v5.10.1

npm v3.8.3

  • Me di por vencido y terminé copiando manualmente las fuentes en el myapp/android/app/src/main/assets/ carpeta de la myapp/node_modules/react-native-vector-icons/Fonts carpeta..

    – Vegard

    8 de febrero de 2017 a las 16:43

Abierto android/app/build.gradle y agrega lo siguiente:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Puede seguir las instrucciones para instalar correctamente el módulo en Android: reaccionar-nativo-vector-iconos#instalar-android

  • ¡Gracias! No olvide reconstruir (npx react-native run-android).

    –Filip Savic

    12 de noviembre de 2020 a las 9:13

  • Gracias, gran solución. Resolvió mi error.

    – Kayes Ibna Qayum

    2 oct 2021 a las 14:37

  • ¡¡¡Esta es la mejor respuesta de todas!!! ¡¡Sucinto!!

    – Hardeep Chabra

    6 abr a las 13:01

  • Funciona. Gracias por estas soluciones rápidas.

    – Mitesh Khatri

    23 de mayo a las 7:29

Avatar de usuario de Badis Merabet
Badis Merabet

Lo arreglé ejecutando:

react-native link
react-native run-android

  • Tenga en cuenta que si ejecuta esto, solo debe ejecutarlo con el paquete que desee (por ejemplo, react-native link react-native-vector-icons), porque de lo contrario podría volver a vincular paquetes que configuró de una manera diferente. Aprendí que de la manera difícil

    – Noé Allen

    1 de diciembre de 2018 a las 5:16

Abra la terminal en la misma ruta del proyecto:

react-native link react-native-vector-icons 
react-native run-android 

Avatar de usuario de Irfan Khan
irfan khan

Editar android/app/build.gradle

Solo agrega dependencias

proyecto de implementación (‘:react-native-vector-icons’)

Las siguientes líneas de código son opcionales si está utilizando RN> 0.60

Editar android/app/build.gradle ( NO android/build.gradle ) y agregue lo siguiente:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Editar android/settings.gradle para verse así:

rootProject.name="MyApp"

include ':app'

// Add these two lines
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

referencias:
https://github.com/oblador/react-native-vector-icons

Después de hacer los pasos mencionados a continuación, funciona bien.

Antes, asegúrese de seguir estos pasos.

Paquete de instalación:

 yarn add react-native-vector-icons

Importar: import Ionicons from 'react-native-vector-icons/Ionicons';

Código de ejemplo:

return (
      <View style={styles.buttonCircle}>
        <Ionicons
          testID="nextButton"
          name="arrow-forward"
          color="rgba(255, 255, 255, .9)"
          size={24}
          style={{backgroundColor: 'transparent'}}
        />
      </View>
    );

Abierto Android/aplicación/build.gradle y agregue la línea mencionada debajo después de la reaccionar.gradle.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Abierto android/configuraciones.gradle Agregue debajo de la línea mencionada.

// Agrega estas dos lineas

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Detiene el servidor de desarrollo y vuelve a ejecutar la aplicación reaccionar-nativo ejecutar-android

Espero que sea útil.

  • Para cualquiera que se pregunte cuál probar. Esto aquí funcionó para mí.

    – Manu S. Pillai

    29 de marzo de 2021 a las 14:14

  • ¡Gracias, funcionó para mí! ¿Podría explicarnos cómo funciona?

    – Programadores Brasil

    29 de julio de 2021 a las 14:01

Avatar de usuario de Sourabh Gera
Surabh Gera

In :-   android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

ingrese la descripción de la imagen aquí

and setting.gradle file add this 

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

ingrese la descripción de la imagen aquí

  • Para cualquiera que se pregunte cuál probar. Esto aquí funcionó para mí.

    – Manu S. Pillai

    29 de marzo de 2021 a las 14:14

  • ¡Gracias, funcionó para mí! ¿Podría explicarnos cómo funciona?

    – Programadores Brasil

    29 de julio de 2021 a las 14:01

Avatar de usuario de Risqi Ardiansyah
Risqi Ardiansyah

Tengo el mismo problema y lo resolví, intentemos:

  1. Abierto android/app/build.gradle ( NO android/build.gradle )
  2. agrega lo siguiente: apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
  3. Después de eso, debe detener el Dev y reiniciarlo/ejecutarlo nuevamente (npm run android)

Espero que esto te ayude 😀

¿Ha sido útil esta solución?