react-native-vector-icons android图标乱码

最新推荐文章于 2024-03-06 15:10:08 发布

原创最新推荐文章于 2024-03-06 15:10:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #react-native-vector-icons

React Native 专栏收录该内容

24 篇文章

订阅专栏

博客主要讲述了在React Native真机调试时，使用蚂蚁金服的AntDesign字体出现乱码或无效的问题。给出的解决方案是将所需字体从指定目录拷贝到特定文件夹，若文件夹不存在则手工创建，同时修改build.gradle文件，还可通过特定网址检索库，重新运行项目图标即可正常显示。

问题：

我用的字体是蚂蚁金服的AntDesign,在真机调试时乱码或无效（FontAwesome显示的不是指定的图片，AntDesign显示的是乱码）

解决方案：

步骤1、将自己需要的字体从\node_modules\react-native-vector-icons\Fonts中拷贝到\android\app\src\main\asserts\fonts中，如果asserts\fonts文件夹不存在就手工创建

步骤2、修改\android\app\build.gradle文件，添加以下两行

project.ext.vectoricons = [
    iconFontNames: [ 'AntDesign.ttf' ] // 指定要使用的字体库。
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

注意：步骤2也要执行，只执行步骤1亲试不行

另外，可以通过https://oblador.github.io/react-native-vector-icons/这个地方快速检索自己想要使用的库

重新运行项目，图标正常显示！