react native 新增自定義字型
阿新 • • 發佈:2019-01-25
不可避免地,一款高顏值的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三元判斷系統型別適配一個字型名,
或者將字型檔名稱改成字型家族名(如果反向改字型家族名需要使用字型軟體)
此外,注意字型的侵權問題,沒有版權一旦上架就是侵權事實,
想改都來不及,小心成為被告,賠個十來萬的也不是沒發生過。
避免侵權可以更麻煩地服務端渲染需要用到字型成圖片遠端獲取,就說用的是第三方的
字型轉圖片服務,具體是哪個第三方,就說是商業機密,字型公司也拿你沒轍。