1. 程式人生 > >react native 新增自定義字型

react native 新增自定義字型

不可避免地,一款高顏值的App或多或少會使用自定義的字型,如何在React Native專案中新增自定義字型呢?答案還是相對簡單的,幾個命令列命令就能搞定

1.首先,確保字型格式是ttf格式的字型,並將自定義的字型整體存入專案資料夾中

比如新建個資料夾名為fonts放在根目錄下

2.其次,修改專案資料夾的package.json檔案,要類似於檔案中鍵值的寫法,

新增一行如下的json,要求是雙引號嚴格的json

"rnpm": {
	   "assets": ["字型資料夾相對於專案資料夾根目錄的路徑"]
	}

注意,上一行的json要以英文逗號結尾,這一行的json一定不能以英文逗號結尾

關於路徑,我使用的路徑是

./fonts

點的意思是,當前資料夾,即與package.json同級的資料夾

3.隨後,命令列進入專案資料夾根目錄,執行如下命令

react-native link
如果package.json檔案寫對了,一定能夠完成檔案的連結

這個連結過程會自動將字型資料夾拷入安卓的資原始檔夾中,修改ios專案的info.plist

完成連結字型檔案後,就可以使用了,親測有效

注意!!!

安卓下fontFamily樣式屬性直接填寫字型的檔名稱即可(不填寫字尾)

然而ios下fontFamily要求使用字型家族名,這相當麻煩,沒有檔名直觀

,你可能需要使用font creator軟體

檢視字型命名裡的字型家族名,

然後在ios中使用它的家族名

因此,跨平臺開發時,可以使用Platform.OS三元判斷系統型別適配一個字型名,

或者將字型檔名稱改成字型家族名(如果反向改字型家族名需要使用字型軟體)

此外,注意字型的侵權問題,沒有版權一旦上架就是侵權事實,

想改都來不及,小心成為被告,賠個十來萬的也不是沒發生過。

避免侵權可以更麻煩地服務端渲染需要用到字型成圖片遠端獲取,就說用的是第三方的

字型轉圖片服務,具體是哪個第三方,就說是商業機密,字型公司也拿你沒轍。