react-native
Aangepaste lettertypen

Stappen om aangepaste lettertypen te gebruiken in React Native (Android)

1. Plak uw lettertypebestand in android/app/src/main/assets/fonts/font_name.ttf
2. Hercompileer de Android-app door react-native run-android
3. Nu kunt u fontFamily: 'font_name' in uw oorspronkelijke native stijlen

Stappen om aangepaste lettertypen te gebruiken in React Native (iOS)

1. Neem het lettertype op in uw Xcode-project.

2. Zorg ervoor dat ze zijn opgenomen in de kolom Doellidmaatschap

Klik op het lettertype in de navigator en controleer of het lettertype is opgenomen.

3. Controleer of het lettertype is opgenomen als Bron in uw bundel

klik op uw Xcode-projectbestand, selecteer "Build Phases, selecteer" Copy Bundle Resources ". Controleer of uw lettertype is toegevoegd.

4. Neem het lettertype op in Application Plist (Info.plist)

Klik in de hoofdmap van de toepassing op Info.plist, klik op "Informatie-eigenschappenlijst" en klik vervolgens op het plusteken (+). kies uit de vervolgkeuzelijst "Lettertypen geleverd door toepassing".

5. Voeg de lettertypenaam toe aan lettertypen die door de toepassing worden verstrekt

Vouw lettertypen uit door toepassing uit en voeg de lettertypenaam exact toe aan de kolom Waarde

6. Gebruik het in de applicatie

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

Aangepaste lettertypen voor zowel Android als IOS

• Maak een map in uw projectmap en voeg uw lettertypen eraan toe. Voorbeeld:

  • Voorbeeld: Hier hebben we een map in de root met de naam "mystuff" en vervolgens "fonts" toegevoegd, en daarin hebben we onze fonts geplaatst:
    • 

• Voeg de onderstaande code toe in package.json .

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

  • Voor het bovenstaande voorbeeld zou ons pakket.json nu het pad "mystuff / fonts" hebben:

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

• Voer de opdracht react-native link uit.

• Aangepaste lettertypen gebruiken op onderstaande projectcode

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

  Waar FONT-NAME het specifieke FONT-NAME is.

  Android

  FONT-NAME zijn de woorden vóór de extensie in het bestand. Voorbeeld: de bestandsnaam van uw lettertype is Roboto-Regular.ttf , dus u zou fontFamily: Roboto-Regular .

  iOS

  FONT-NAME is "Volledige naam" gevonden na klikken met de rechtermuisknop op het lettertypebestand en vervolgens klikken op "Info ophalen". (Bron: https://stackoverflow.com/a/16788493/2529614 ), in de onderstaande schermafbeelding is de bestandsnaam MM Proxima Nova Ultra bold.otf , maar "Volledige naam" is "Proxima Nova Semibold", dus u zou set fontFamily: Proxima Nova Semibold . Screenshot -

• Voer react-native run-ios of react-native run-android opnieuw uit (dit compileert met de bronnen)