Búsqueda de sitios web

typescript - ¿Cómo puedo ignorar la fuente del sistema operativo en react-native?

Quiero ignorar la fuente del sistema operativo (iOS y Android) y usar las diferentes fuentes que utilicé en mi proyecto de react-native. Me gustaría hacerlo solo una vez, pero no entiendo cómo. ¿Puedes ayudarme?

Respuesta #1

Agregar fuentes a los activos

Agrega todos los archivos de fuentes que quieras a una carpeta «assets/fonts» en la raíz de tu proyecto de React Native

Package.json

A continuación, necesitamos decirle a React Native dónde se encuentran nuestras fuentes personalizadas. Hacemos esto agregando rnpm a package.json proporcionando la ruta a los archivos de fuentes:

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

Luego le decimos a React Native que vincule esos archivos de fuente por nosotros:

react-native link

En IOS

Esto debería agregar las referencias de fuentes en su archivo Info.plist para iOS y en Android copiar los archivos de fuentes a android/app/src/main/assets/fonts. Puede verificar esto abriendo Info.plist desde la carpeta de iOS y buscando una clave UIAppFonts, debería ver algo similar a:

<key>UIAppFonts</key>
    <array>
        <string>YOUR_FONT_FILE.ttf</string>
    </array>

En Android

si miras en la ruta del archivo “android/app/src/main/assets/fonts/” deberías ver que tus fuentes han sido copiadas:

Estilos de React Native

Con tus fuentes integradas y referenciadas, es un caso simple de agregarlas a tus estilos de React Native. Simplemente agrega una propiedad fontFamily con el nombre de tu fuente:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  foo: {
    fontFamily: "YOUR_FONT_FAMILY_NAME",
    fontSize: 30,
    textAlign: "center",
    margin: 10
  },
  bar: {
    fontFamily: "YOUR_FONT_FAMILY_NAME",
    fontSize: 20,
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Fuentes :

  • https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e
  • https://docs.expo.io/versions/latest/guides/using-custom-fonts/
  • https://blog.bam.tech/developper-news/add-a-custom-font-to-your-react-native-app

Artículos relacionados