react-native android fontFamily 不生效

Question

問題 1：

我在 index.android.js 的歡迎樣式中添加了一個 fontFamily，但是沒有任何效果。 fontFamily 真的可以在安卓上使用嗎？

歡迎：{ fontSize:20, fontFamily:'roboto-thin', textAlign:'center', margin:10}

問題2：

如果 fontFamily 在 android 上工作，有沒有辦法從資產加載自定義字體？ 或者這是由 react-native 實現的一些功能？

Answer 1

對於 Android：使用 0.16.0-rc 添加了自定義字體。 所以你首先需要有 0.16.0-rc 版本，然后你可以從網上下載任何字體。

1. 把你的字體文件放在 projectfolder/android/app/src/main/assets/fonts/font_name.ttf
2. 記得重新編譯它是： react-native run-android
3. 然后你可以在你的風格中使用fontFamily: 'font_name' 。

Answer 2

另請注意 react-native 中自定義 Android 字體的以下限制：

• 字體必須放在android/app/src/main/assets/fonts
• 僅支持.ttf文件
• 文件名必須與fontFamily完全匹配。 例如，如果fontFamily是'Source Sans Pro' ，則該文件必須命名為Source Sans Pro.ttf （而不是SourceSansPro.ttf ）。 以下段落中提到的任何后綴都會自動從文件中刪除。
• 當字體為粗體和/或斜體時，它必須用於以下后綴：
  • _bold （例如Source Sans Pro_bold.ttf ）
  • _italic
  • _bold_italic

Answer 3

我相信以下是這里已經解釋的方法的更干凈的替代方法：

將所有字體放在 React-Native 項目目錄中

./assets/fonts/

在 package.json 中添加以下行

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

最后從您的項目目錄在終端中運行

$ react-native link

在您的樣式中使用它以這種方式聲明

fontFamily: 'your-font-name without extension'

如果你的字體是Raleway-Bold.ttf那么，

fontFamily: 'Raleway-Bold'

---

來源https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

Answer 4

你好這個問題腰對我來說超過兩天了“El+Messiri”字體“ https://fonts.google.com/specimen/El+Messiri ”

我正在做每一個思考寫：

1. 將您的字體文件放在 projectfolder/android/app/src/main/assets/fonts/ElMessiri-Regular.ttf
2. 記得重新編譯它是： react-native run-android 然后

3. 您可以在您的風格中使用 fontFamily: 'ElMessiri-Regular'。

   但錯誤在於我在fontFamily: 'ElMessiri-Regular '之后使用了fontWeight : 'bold'並且 fontWeight 覆蓋了 fontFamily 因為“El+Messiri”字體有他自己的 fontFamily 粗體，即“ElMessiri-Bold”

Answer 5

此功能尚未實現。 在此處查看 github 上的相關問題。

Answer 6

似乎添加了自定義字體，請查看此提交：

https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702

Answer 7

對於那些僅在 iOS 上遇到問題的人 - 有時無法正確識別 fontFamily 名稱：

解決我的問題的唯一解決方案是記錄所有字體以找出正確的命名

（確保僅在添加資產/字體並運行react-native link后才執行以下步驟）：

無論如何，要記錄它們，請使用 xcode 打開appName.xcworkspace文件，然后編輯 AppDelegate.m 將此行放在didFinishLaunchingWithOptions方法的末尾（以及 return 語句之前）：

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

因此，當您運行應用程序（來自 xcode）時，它會輸出如下內容：

這樣，我可以在 react-native 樣式中使用 fontFamily Barow-Light或Zapfino

希望有幫助！

Answer 8

即使遵循了我找到的所有建議，我也為此感到非常困難。

對我有用的方法：確保僅使用小寫字母和下划線命名字體文件。 重新鏈接。 完畢。

已經為此進行了大量的頭發拉扯，但據我所知，在任何地方都沒有提及。