1. 程式人生 > 其它 >React Native字型圖示顯示的問題

React Native字型圖示顯示的問題

技術標籤:React-nativereact nativeandroid

準確地說應該是圖示的亂碼問題。

前提是要下載react-native-vector-icons圖示庫,然後匯入一下,這裡我用的是FontAwesome5(用什麼無所謂啦)

之前沒有做過類似開發,一開始搞不清什麼狀況,後來查詢資料才發現是因為沒有將資源匯入到本地andriod資源中,所以載入圖示的時候就會找不到字型圖示(頁面顯示是這樣的'[X]').

要將這個資料夾下的.ttf檔案複製一份

node_modules\react-native-vector-icons\Fonts

放到下面的資料夾裡面

android\app\src\main\assets\fonts

然後修改android\app\build.gradle檔案,配置一下本地資源

project.ext.vectoricons = [
    iconFontNames: [         
        'FontAwesome5_Brands.ttf','FontAwesome5_Regular.ttf','FontAwesome5_Solid.ttf' ] // 指定要使用的字型庫。
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

最後重新編譯執行npx react-native run-android 一下就搞定啦