React Native 手動換字型


使用版本: 0.63
適用版本: 0.6 以上

React Native 在 0.6 版本後就不再支援 react-native link,所以要用其他方法換字型。

我是跟著這篇文章(Ultimate guide to use custom fonts in react native)手動部分的教學做的,但還是遇到文章沒提到的問題,所以再另外寫這篇出來。

遇到的地雷:

  • 使用自訂字型後不能使用 fontWeight或其他會改變字體形狀的 style 可能也不行,不然無法套入字型
  • 字型用 ttf 格式比較穩, otf 有時無法套入?
  • 關於 Xcode 上介面操作問題,如果資料夾顏色是藍色而非黃色,代表 Xcode 沒有成功追蹤到該資料夾,字型會無法套入。(下面附圖和流程)

教學:
先去下載字型。

安卓部分滿簡單的,進到 android/app/src/mains 目錄下, 加入資料夾就能用了,我這裡建了兩層資料夾 assets/fonts

iOS 的話比較麻煩,要到 Xcode 上面改,打開 ios 資料夾,點選 .xcodeproj 結尾的檔案。

雖然 Apple 開發者文件說可以用拖曳檔案的方式加入,但我這樣做檔案沒辦法追蹤。

拖曳到 SampleProject 裡。

資料夾顏色還是藍色的,代表 Xcode 沒有追蹤成功。

把這個檔案刪掉重用。

用加入 New group 方式最穩最安全,只要資料夾顏色是黃色就代表成功了。

可以在右側欄位改資料夾名字。

這時可以看到 fonts 的資料夾變成黃色的,代表成功被 Xcode 追蹤了。接著我們對這資料夾按右建再將字型檔案加入。


接著麻煩的地方來了,找出 Info.plist 這個檔案。

會進到這個列表,點選 + 號的按紐。

新增這個欄位 Fonts provided by application, 然後再把字體的檔案名打上去。

回到 vscode 會看到以下的更改:

通常 cmd + r 重新整理就能看到新的字體了,沒有的話就關掉模擬器重跑 react-native run-ios --simulator='iPhone 12 Pro'。安卓也是同樣道理,可以先到 android 資料夾使用指令清空暫存 ./gradlew clean ,如果不行再重開 react-native run android

#React Native






Related Posts

一看就懂的 React Server Rendering(Isomorphic JavaScript)入門教學

一看就懂的 React Server Rendering(Isomorphic JavaScript)入門教學

電腦科學概論:演算法概要

電腦科學概論:演算法概要

RNN 進化了 - LSTM 與 GRU

RNN 進化了 - LSTM 與 GRU




Sponsored



Comments