react-native
Anpassade teckensnitt

Steg för att använda anpassade teckensnitt i React Native (Android)

1. Klistra in din teckensnittsfil in i android/app/src/main/assets/fonts/font_name.ttf
2. Kompilera Android-appen genom att köra react-native run-android
3. Nu kan du använda fontFamily: 'font_name' i dina React Native Styles

Steg för att använda anpassade teckensnitt i React Native (iOS)

1. Inkludera teckensnittet i ditt Xcode-projekt.

2. Se till att de ingår i kolumnen Målmedlemskap

Klicka på teckensnittet från navigatorn och kontrollera om teckensnittet inkluderade.

3. Kontrollera om teckensnittet ingår som resurs i ditt paket

klicka på din Xcode-projektfil, välj "Bygg faser, välj" Kopiera paketresurser ". Kontrollera om ditt teckensnitt har lagts till.

4. Inkludera teckensnittet i Application Plist (Info.plist)

från programmets huvudmapp öppnar Info.plist, klickar på "Information Property List" och klickar sedan på plustecknet (+). Välj "Teckensnitt som tillhandahålls av applikationen" från listrutan.

5. Lägg till teckensnittsnamn i teckensnitt som tillhandahålls av applikationen

utöka teckensnitt som tillhandahålls av applikationen och lägg till typsnittsnamnet exakt i värdekolumnen

6. Använd det i applikationen

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

Anpassade teckensnitt för både Android och IOS

• Skapa en mapp i din projektmapp och lägg till dina teckensnitt i den. Exempel:

  • Exempel: Här har vi lagt till en mapp i roten som heter "mystuff", sedan "typsnitt", och inuti den placerade vi våra teckensnitt:
    • 

• Lägg till koden nedan i package.json .

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

  • För exemplet ovan skulle vårt paket.json nu ha en sökväg med "mystuff / fonts":

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

• Kör react-native link .

• Använda anpassade teckensnitt på projektet under koden

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

  Där FONT-NAME är FONT-NAME .

  Android

  FONT-NAME är orden före filtillägget. Exempel: Ditt teckensnitts filnamn är Roboto-Regular.ttf , så du ställer in fontFamily: Roboto-Regular .

  iOS

  FONT-NAME är "Fullständigt namn" hittades efter att högerklicka, på teckensnittsfilen och sedan klicka på "Få information". (Källa: https://stackoverflow.com/a/16788493/2529614 ), i skärmdumpen nedan är filnamnet MM Proxima Nova Ultra bold.otf , men "Full Name" är "Proxima Nova Semibold", så du skulle ställa fontFamily: Proxima Nova Semibold . Skärmdump -

• Kör react-native run-ios eller react-native run-android igen (detta kommer att kompileras med resurserna)