react-native
Niestandardowe czcionki

Kroki korzystania z niestandardowych czcionek w React Native (Android)

1. Wklej plik czcionek do android/app/src/main/assets/fonts/font_name.ttf
2. Ponownie skompiluj aplikację na Androida, uruchamiając react-native run-android
3. Teraz możesz używać fontFamily: 'font_name' w swoich stylach React Native

Kroki korzystania z niestandardowych czcionek w React Native (iOS)

1. Dołącz czcionkę do swojego projektu Xcode.

2. Upewnij się, że są uwzględnione w kolumnie Członkostwo docelowe

Kliknij czcionkę w nawigatorze i sprawdź, czy czcionka została dołączona.

3. Sprawdź, czy czcionka zawarta w pakiecie jako Zasób

kliknij plik projektu Xcode, wybierz „Fazy kompilacji”, wybierz „Kopiuj zasoby pakietu”. Sprawdź, czy czcionka została dodana.

4. Dołącz czcionkę do listy aplikacji (Info.plist)

w głównym folderze aplikacji otwórz Info.plist, kliknij „Lista właściwości informacji”, a następnie znak plus (+). z rozwijanej listy wybierz „Czcionki dostarczone przez aplikację”.

5. Dodaj nazwę czcionki w czcionkach dostarczonych przez aplikację

rozwiń Czcionki dostarczone przez aplikację i dodaj Nazwę czcionki dokładnie do kolumny wartości

6. Użyj go w aplikacji

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

Niestandardowe czcionki dla Androida i IOS

• Utwórz folder w folderze projektu i dodaj do niego czcionki. Przykład:

  • Przykład: Tutaj dodaliśmy folder w folderze głównym o nazwie „mystuff”, następnie „fonts”, a wewnątrz niego umieściliśmy nasze czcionki:
    • 

• Dodaj poniższy kod w package.json .

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

  • W powyższym przykładzie nasz pakiet.json miałby teraz ścieżkę „mystuff / fonts”:

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

• Uruchom komendę react-native link .

• Używanie niestandardowych czcionek w projekcie poniżej kodu

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

  Gdzie FONT-NAME jest prefiksem specyficznym dla platformy.

  Android

  FONT-NAME to słowa przed rozszerzeniem w pliku. Przykład: nazwa pliku twojej czcionki to Roboto-Regular.ttf , więc ustaw fontFamily: Roboto-Regular .

  iOS

  FONT-NAME to „Pełna nazwa” znaleziona po kliknięciu prawym przyciskiem myszy pliku czcionki, a następnie kliknięciu „Uzyskaj informacje”. (Źródło: https://stackoverflow.com/a/16788493/2529614 ), na poniższym zrzucie ekranu nazwa pliku to MM Proxima Nova Ultra bold.otf , jednak „Pełna nazwa” to „Proxima Nova Semibold”, więc ustaw fontFamily: Proxima Nova Semibold . Zrzut ekranu -

• Uruchom ponownie react-native run-ios lub react-native run-android (spowoduje to rekompilację z zasobami)