¿Existe un equivalente a este CSS en React Native, de modo 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.

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

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 mayor orden, importe la setCustomTextfunción como tal.

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

Luego, cree el estilo / accesorios personalizados que desee para el Textcomponente react-native . En su caso, le gustaría que fontFamily funcione en todos los Textcomponentes.

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

Llame a la setCustomTextfunción y pase sus accesorios / estilos a la función.

setCustomText(customTextProps);

Y luego todos los Textcomponentes de react-native tendrán su fontFamily declarada junto con cualquier otro accesorio / estilo que proporcione.

Para React Native 0.56.0+, compruebe si defaultProps se define primero:

Text.defaultProps = Text.defaultProps || {}

Luego añade:

Text.defaultProps.style =  { fontFamily: 'some_font' }

Agregue lo anterior en el constructor del archivo App.js (o cualquier componente raíz que tenga).

Para anular el estilo, puede crear un objeto de estilo y difundirlo y luego agregar su estilo adicional (por ejemplo { ...baseStyle, fontSize: 16 })

Puede anular el comportamiento de Text agregando esto en cualquiera de sus componentes usando Text:

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.prototypeya no funciona. Necesitas eliminar .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]
    });
};

Añadir

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

en package.json luego correreact-native link

Con React-Native 0.56, el método de cambio anterior Text.prototype.renderya 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>
...

Agregue esta función a su Appcomponente raíz y luego ejecútela desde su constructor después de agregar su fuente siguiendo 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;
            }
        };
    }
}

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

TLDR; Agregue el siguiente bloque en suAppDelegate.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 formas en las que puede hacer esto además de usar un complemento como, react-native-global-propsasí que lo guiaré paso a paso.

Añadiendo 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 "react-native link" 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 corran code ios/*/Info.plistpara confirmar)

Aquí supongamos que Verlages la fuente que agregó, 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 estén realmente allí y se estén cargando (así es también como lo haría manualmente).

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

Obtener nombres de fuentes (reconocidos por XCode)

Primero abra sus registros de XCode, como:

Luego puede agregar el siguiente bloque en su AppDelegate.mpara 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 ejecutes deberías encontrar tus fuentes si se cargan 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 Verlagfamilia 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 fuentes en su AppDelegate.mcon 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.

Establecer en package.json

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

Y vincular el vínculo nativo de reacción

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 comenzar. Para un paso más detallado. visite el enlace mencionado anteriormente