react-native
Caratteri personalizzati

Passos per utilizzare i caratteri personalizzati in React Native (Android)

1. Incolla il tuo file di caratteri all'interno di android/app/src/main/assets/fonts/font_name.ttf
2. Ricompila l'app per Android eseguendo react-native run-android
3. Ora, puoi usare fontFamily: 'font_name' nei tuoi stili nativi di React

Passos per utilizzare i caratteri personalizzati in React Native (iOS)

1. Includere il carattere nel progetto Xcode.

2. Assicurati che siano inclusi nella colonna Target Membership

Fai clic sul carattere dal navigatore e controlla se il carattere è incluso.

3. Controlla se il font è incluso come risorsa nel tuo pacchetto

fai clic sul tuo file di progetto Xcode, seleziona "Crea fasi, seleziona" Copia risorse pacchetto "e verifica se il tuo carattere è stato aggiunto.

4. Includere il carattere in Application Plist (Info.plist)

dalla cartella principale dell'applicazione apri Info.plist, fai clic su "Elenco proprietà informazioni", quindi fai clic sul segno più (+). dall'elenco a discesa scegliere "Caratteri forniti dall'applicazione".

5. Aggiungi il nome del carattere in Caratteri forniti dall'applicazione

espandi Caratteri forniti da Applicazione e aggiungi il Nome Font esattamente alla colonna valore

6. Usalo nell'applicazione

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

Caratteri personalizzati per Android e IOS

• Crea una cartella nella cartella del progetto e aggiungi i tuoi caratteri. Esempio:

  • Esempio: qui abbiamo aggiunto una cartella nella root chiamata "mystuff", quindi "fonts", e al suo interno abbiamo inserito i nostri font:
    • 

• Aggiungi il codice seguente in package.json .

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • Per l'esempio sopra, il nostro package.json ora avrà un percorso di "mystuff / fonts":

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

• Esegui il comando react-native link .

• Utilizzo di caratteri personalizzati sul progetto sotto il codice

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  Dove FONT-NAME è la piattaforma prefissa specifica.

  androide

  FONT-NAME è le parole prima dell'estensione nel file. Esempio: il nome del file del tuo font è Roboto-Regular.ttf , quindi devi impostare fontFamily: Roboto-Regular .

  iOS

  FONT-NAME è "Nome completo" trovato dopo aver fatto clic con il pulsante destro del mouse sul file del carattere, quindi facendo clic su "Ottieni informazioni". (Fonte: https://stackoverflow.com/a/16788493/2529614 ), nello screenshot qui sotto, il nome del file è MM Proxima Nova Ultra bold.otf , tuttavia "Full Name" è "Proxima Nova Semibold", quindi set fontFamily: Proxima Nova Semibold . Immagine dello schermo -

• Esegui react-native run-ios o react-native run-android nuovo (questo verrà ricompilato con le risorse)