react-native - tutorial - unrecognized font family react native




Como definir a família de fontes padrão no React Native? (6)

Existe um equivalente a esse CSS no React Native, para que o aplicativo use a mesma fonte em todos os lugares?

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

A aplicação manual em todos os nós de texto parece muito complicada.



Adicione Text.defaultProps.style = { fontFamily: 'some-font' } no construtor do arquivo App.js (ou em qualquer componente raiz que você tenha).


Com o React-Native 0.56, o método acima para alterar Text.prototype.render não funciona mais, então você precisa usar seu próprio componente, o que pode ser feito em uma linha!

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>
...

Isso funciona para mim: Adicionar fonte personalizada no React Native

baixe suas fontes e coloque-as na pasta assets / fonts, adicione esta linha em package.json

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

abra o terminal e execute este comando: link react-native

Agora você está pronto para ir. Para uma etapa mais detalhada. visite o link acima mencionado


Super tarde para esta discussão, mas aqui vai.

TLDR; Adicione o seguinte bloco no seu AppDelegate.m

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

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

Passo a passo de todo o fluxo.

Algumas maneiras de fazer isso fora do uso de um plug-in como react-native-global-props então eu o guio passo a passo.

Adicionando fontes às plataformas.

Como adicionar a fonte ao projeto IOS

Primeiro, vamos criar um local para nossos ativos. Vamos criar o seguinte diretório em nossa raiz.

`` ``

ios/
static/
       fonts/

`` ``

Agora vamos adicionar um NPM "React Native" em nosso package.json

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

Agora podemos executar o "link react-native" para adicionar nossos ativos aos nossos aplicativos nativos.

Verificando ou fazendo manualmente.

Isso deve adicionar seus nomes de fonte aos projetos .plist (para usuários de código VS, execute o code ios/*/Info.plist para confirmar)

Aqui vamos supor que Verlag é a fonte que você adicionou, deve ser algo como isto:

     <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>

Agora que você os mapeou, agora vamos ter certeza de que eles estão realmente lá e sendo carregados (também é assim que você faria manualmente).

Vá para "Build Phase" > "Copy Bundler Resource" . Se não funcionar, você adicionará manualmente aqui.

Obter nomes de fontes (reconhecidos pelo XCode)

Primeiro abra seus logs do XCode, como:

Em seguida, você pode adicionar o seguinte bloco no AppDelegate.m para registrar os nomes das fontes e da família de fontes.

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


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

  ...
}

Depois de executar, você deve encontrar suas fontes se carregadas corretamente, aqui encontramos as nossas em logs 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

Agora sabemos que carregamos a família Verlag e são as fontes dentro dessa família

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

Agora, esses são os nomes que diferenciam maiúsculas de minúsculas que podemos usar em nossa família de fontes que podemos usar em nosso aplicativo nativo de reação.

Got -'em agora defina a fonte padrão.

Em seguida, defina uma fonte padrão para adicionar o nome da família da fonte no seu AppDelegate.m com esta linha

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

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

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

Feito.


Você pode substituir o comportamento do texto adicionando isso a qualquer componente usando o 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]
    });
};

Edit: desde React Native 0.56, Text.prototype não está mais funcionando. Você precisa remover o .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]
    });
};




react-native