发布到npm的React Native组件包内react-native-vector-icons不显示如何解决

问题排查结果 #

该问题核心原因是react-native-vector-icons依赖的字体资源仅在你本地的组件库测试项目完成了配置，发布到npm的组件包中没有包含字体文件，也不会自动在宿主项目触发原生配置流程，因此图标无法正常渲染。

可用解决方案 #

方案1：补充接入文档，要求宿主项目自行配置 #

在你的npm包说明页补充如下接入步骤，所有使用该组件包的项目完成配置后即可正常显示图标：

1. 安装react-native-vector-icons依赖：
   npm i react-native-vector-icons
2. 完成原生端配置：

• iOS：如果是React Native 0.60及以上版本，完成依赖安装后进入ios目录执行pod install即可自动完成配置；低版本需要手动在Info.plist中添加Ionicons字体声明。
• Android：打开项目android/app/build.gradle文件，新增如下配置：

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

3. 重新编译运行项目即可。

方案2：组件包侧优化，无需宿主额外配置 #

你可以调整组件包的实现逻辑，从根源解决该问题：

• 将react-native-vector-icons设置为组件包的peerDependency，避免宿主项目出现多版本依赖冲突
• 替换所有用到的字体图标为SVG格式资源，打包进组件包内，搭配react-native-svg实现渲染，该方案不需要宿主项目做任何原生配置即可直接使用。

内容的提问来源于stack exchange，提问作者Ganesh Patra