font - ¿Cómo configurar la familia de fuentes predeterminada en React Native?

font family react native

Question

¿Hay un equivalente a este CSS en React Native, para que la aplicación use la misma fuente en todas partes?

body {
  font-family: ''Open Sans'';
}

Aplicarlo manualmente en cada nodo de texto parece demasiado complicado.

Answer 1

Agregue Text.defaultProps.style = { fontFamily: ''some-font'' } en el constructor del archivo App.js (o cualquier componente raíz que tenga).

Answer 2

Agregue esta función a su componente de App raíz y luego ejecútelo desde su constructor después de agregar su fuente usando estas instrucciones. https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

import {Text, TextInput} from ''react-native''

SetDefaultFontFamily = () => {
    let components = [Text, TextInput]

    const customProps = {
        style: {
            fontFamily: "Rubik"
        }
    }

    for(let i = 0; i < components.length; i++) {
        const TextRender = components[i].prototype.render;
        const initialDefaultProps = components[i].prototype.constructor.defaultProps;
        components[i].prototype.constructor.defaultProps = {
            ...initialDefaultProps,
            ...customProps,
        }
        components[i].prototype.render = function render() {
            let oldProps = this.props;
            this.props = { ...this.props, style: [customProps.style, this.props.style] };
            try {
                return TextRender.apply(this, arguments);
            } finally {
                this.props = oldProps;
            }
        };
    }
}

Answer 3

Con React-Native 0.56, el método anterior de cambiar Text.prototype.render ya no funciona, por lo que debe usar su propio componente, ¡que se puede hacer en una línea!

MyText.js

export default props => <Text {...props} style={[{fontFamily: ''Helvetica''}, props.style]}>{props.children}</Text>

AnotherComponent.js

import Text from ''./MyText'';

...
<Text>This will show in default font.</Text>
...

Answer 4

Eso funciona para mí: Agregar fuente personalizada en React Native

descargue sus fuentes y colóquelas en la carpeta assets / fonts, agregue esta línea en package.json

 "rnpm": {
"assets": ["assets/fonts/Sarpanch"]}

luego abra la terminal y ejecute este comando: react-native link

Ahora estás listo para ir. Para un paso más detallado. visite el enlace mencionado anteriormente

Answer 5

La forma recomendada es crear su propio componente, como MyAppText. MyAppText sería un componente simple que representa un componente de texto usando su estilo universal y puede pasar por otros accesorios, etc.

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

Answer 6

Puede anular el comportamiento del texto agregando esto en cualquiera de sus componentes usando Texto:

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: ''red'', fontFamily: ''Arial''}, origin.props.style]
    });
};

Editar: desde React Native 0.56, Text.prototype ya no funciona. Debes eliminar el .prototype :

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: ''red'', fontFamily: ''Arial''}, origin.props.style]
    });
};

Answer 7

Recientemente se creó un módulo de nodo que resuelve este problema para que no tenga que crear otro componente .

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

La documentación indica que en su componente de orden superior, importe la función setCustomText manera.

import { setCustomText } from ''react-native-global-props'';

Luego, cree el estilo / accesorios personalizados que desee para el componente de Text nativo de reacción. En su caso, desea que fontFamily funcione en todos los componentes de Text .

const customTextProps = { 
  style: { 
    fontFamily: yourFont
  }
}

Llama a la función setCustomText y pasa tus accesorios / estilos a la función.

setCustomText(customTextProps);

Y luego, todos los componentes de Text reacción nativa tendrán su familia de fuentes declarada junto con cualquier otro accesorio / estilo que proporcione.

Answer 8

Súper tarde a este hilo pero aquí va.

TLDR; Agregue el siguiente bloque en su AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // HERE: replace "Verlag" with your font
  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

Tutorial de todo el flujo.

Algunas maneras de hacer esto fuera de usar un complemento como react-native-global-props así que lo guiaré paso a paso.

Agregar fuentes a las plataformas.

Cómo agregar la fuente al proyecto IOS

Primero, creemos una ubicación para nuestros activos. Hagamos el siguiente directorio en nuestra raíz.

`` `

ios/
static/
       fonts/

`` `

Ahora agreguemos un NPM "React Native" en nuestro package.json

  "rnpm": {
    "static": [
   "./static/fonts/"
    ]
  }

Ahora podemos ejecutar "reaccionar enlace nativo" para agregar nuestros activos a nuestras aplicaciones nativas.

Verificando o haciendo manualmente.

Eso debería agregar sus nombres de fuente en los proyectos .plist (para que los usuarios del código VS ejecuten el code ios/*/Info.plist para confirmar)

Supongamos que Verlag es la fuente que agregaste, debería verse así:

     <dict>
   <plist>
      .....
      <key>UIAppFonts</key>
      <array>
         <string>Verlag Bold Italic.otf</string>
         <string>Verlag Book Italic.otf</string>
         <string>Verlag Light.otf</string>
         <string>Verlag XLight Italic.otf</string>
         <string>Verlag XLight.otf</string>
         <string>Verlag-Black.otf</string>
         <string>Verlag-BlackItalic.otf</string>
         <string>Verlag-Bold.otf</string>
         <string>Verlag-Book.otf</string>
         <string>Verlag-LightItalic.otf</string>
      </array>
      ....    
</dict>
</plist>

Ahora que los asignó, ahora asegurémonos de que realmente estén allí y se carguen (así es como lo haría manualmente).

Vaya a "Build Phase" > "Copy Bundler Resource" . Si no funciona, agregará manualmente debajo de ellos aquí.

Obtener nombres de fuente (reconocido por XCode)

Primero abra sus registros XCode, como:

Luego puede agregar el siguiente bloque en su AppDelegate.m para registrar los nombres de las fuentes y la familia de fuentes.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    .....


  for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

  ...
}

Una vez que ejecute, debería encontrar sus fuentes si están cargadas correctamente, aquí encontramos las nuestras en registros como este:

2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266]  Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266]  Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266]  Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266]  Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266]  Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266]  Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266]  Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266]  Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266]  Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266]  Verlag-Light

Así que ahora sabemos que cargó la familia Verlag y son las fuentes dentro de esa familia

• Verlag-Book
• Verlag-BlackItalic
• Verlag-BoldItalic
• Verlag-XLight
• Verlag-Bold
• Verlag-Black
• Verlag-XLightItalic
• Verlag-LightItalic
• Verlag-BookItalic
• Verlag-Light

Estos son ahora los nombres sensibles a mayúsculas y minúsculas que podemos usar en nuestra familia de fuentes que podemos usar en nuestra aplicación nativa de reacción.

Got -''em ahora establece la fuente predeterminada.

Luego, para establecer una fuente predeterminada para agregar su nombre de familia de fuente en su AppDelegate.m con esta línea

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // ADD THIS LINE (replace "Verlag" with your font)

  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

Hecho.