UI组件移动开发【免费下载链接】react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.项目地址https://gitcode.com/gh_mirrors/re/react-native-vector-icons点击查看免费下载react-native-vector-icons/fontawesome-pro-duotone-solid是 react-native-vector-icons 生态中专用于 Font Awesome Pro Duotone Solid双色实心字体的独立 npm 包。本文以该包官方 CHANGELOG 为主线梳理它从 0.1.0 到 1.1.2 的完整演进脉络并结合作者仓库中的源码src/index.ts、app.plugin.js、podspec 等深入解读每次变更背后的实现细节最后给出从安装、自定义字体到 Expo 集成的完整实战方案。读完本文你将掌握该字体包的版本对应关系、能力边界与正确接入方式。一、包定位一个不含字体的图标字体包与仓库中 fontawesome-pro-solid、fontawesome-pro-duotone-regular 等同族包一样本包遵循一个关键约束[!IMPORTANT] 该包不内置任何 .ttf 字体文件由于 Font Awesome Pro 是商业授权字体字体文件必须由持有合法授权Font Awesome Pro 订阅的开发者自行提供。从 package.json 的files字段可以看到发布产物包含src、lib、glyphmaps、android、ios、cpp与app.plugin.js但没有fonts目录——这从包结构层面印证了字体自备的设计。包内核心源码 src/index.ts 只有寥寥数行import { createIconSet } from react-native-vector-icons/common; import glyphMap from ../glyphmaps/FontAwesomeProDuotoneSolid.json; export const FontAwesomeProDuotoneSolid createIconSet(glyphMap, { postScriptName: FontAwesome7Duotone-Solid, fontFileName: fa-duotone-900.ttf, }); export type FontAwesomeProDuotoneSolidIconName keyof typeof glyphMap; /** alias */ export default FontAwesomeProDuotoneSolid;关键信息点postScriptName: FontAwesome7Duotone-Solid这是字体的 PostScript 名称在 iOS 上直接作为fontFamily引用见 create-icon-set.tsx 中Platform.select的默认分支必须与字体文件内部 name 表中的 nameID 6 一致fontFileName: fa-duotone-900.ttf期望的字体文件名Android 上使用去掉扩展名的 basename 作为fontFamilyglyphMap来自 glyphmaps/FontAwesomeProDuotoneSolid.json是图标名 → 字符码点的映射表图标组件据此把name属性渲染成对应的 Unicode 字符。从源码结构可以看出本文件标注为generated file由仓库根目录下的生成器 packages/generator-react-native-vector-icons/src/app/templates 模板生成因此不要在包内直接修改相关改动应提交到生成器包。二、版本演进时间线0.1.0 → 1.1.2CHANGELOG 完整记录了 9 个版本的变更按时间倒序排列。下表是纵向梳理结合 README 的版本对照表版本发布日期类型核心变更0.1.02025-11-01初始版本升级 Font Awesome 至 v7采用新包结构0.1.12026-02-25修复添加targetSdkVersion以规避READ_PHONE_STATE权限0.1.22026-03-10特性/修复生成器自动更新上游版本Font Awesome 升至 7.2.00.1.32026-03-17依赖react-native-vector-icons/common升至 12.4.20.2.02026-03-20特性暴露图标家族的静态导出1.0.02026-03-26依赖react-native-vector-icons/common升至 13.0.0跨大版本1.1.02026-04-12特性新增 Expo 配置插件1.1.12026-04-23修复修复 Expo 插件导出问题1.1.22026-05-24依赖react-native-vector-icons/common升至 13.0.1当前最新下面按功能主题而非单纯时间线展开解读。2.1 起点Font Awesome 7 与新包结构0.1.00.1.0 是版本 7 化改造的起点upgrade FontAwesome to version 7 with new package structure。在 v12 之前的旧架构中Font Awesome Pro 系列是单包多风格一个包里同时包含 solid、regular、light、duotone 等所有风格而 v7 之后改为一风格一包的模块化结构duotone-solid 独立成包这正是本包存在的意义。对应的字体版本README 版本对照表显示0.1.0 之后对应上游 Font Awesome 7.1.00.1.1 之后对应7.2.0。也就是说包版本号与上游字体版本不再一一对应而是由 CHANGELOG 中的 upgrade 记录来追踪。2.2 修复 Android 权限问题0.1.10.1.1 修复项add targetSdkVersion to avoid READ_PHONE_STATE permission。这是一个典型的 Android 平台问题某些老版本构建配置在未显式声明targetSdkVersion时会意外引入READ_PHONE_STATE权限。修复方式是显式添加targetSdkVersion。仓库中的 android/src/main/AndroidManifest.xml 与AndroidManifestNew.xml均为空 manifest仅声明包名说明该包本身不注册任何原生模块——这与 VectorIconsFontAwesomeProDuotoneSolidPackage.kt 中getModule返回null、ReactModuleInfoProvider返回空 map 的实现完全吻合图标渲染完全由 JS 层的 Text 组件完成不需要原生模块因此 Android 端的 manifest 保持最简。2.3 生成器自动化与上游升级0.1.20.1.2 包含两项变更generator: auto-update upstream versions in .yo-rc.json during generation生成器yeoman generator在生成包时自动将上游版本写入各包的.yo-rc.json避免手工维护版本元数据upgrade Font Awesome to 7.2.0上游字体从 7.1.0 升级到 7.2.0对应新增/调整的图标字形。这里也提示了包的维护方式整个 Pro 系列包都是通过 packages/generator-react-native-vector-icons 生成器生成的字体更新走跑生成器 → 重新生成包的流水线而不是手工改 glyphmap。2.4 静态导出0.2.00.2.0 的 expose static export for icon families 为图标家族增加了静态导出能力。仓库中 src/static.ts 与index.ts内容一致对应 package.jsonexports字段中的./static子路径./static: { import: { types: ./lib/typescript/module/src/static.d.ts, default: ./lib/module/static.js }, require: { types: ./lib/typescript/commonjs/src/static.d.ts, default: ./lib/commonjs/static.js } }静态导出意味着可以在不挂载 React 组件的情况下直接拿到字形映射与字体配置典型场景包括构建工具中预生成图标资源、服务端渲染SSR、或需要以图标名 → 码点表驱动其他渲染管线如 SVG 转换的场合。此外exports还暴露了./glyphmaps/*.json与./app.plugin.js两个子路径。2.5 跨入 1.xcommon 依赖升级1.0.01.0.0 是一次纯粹的依赖升级Updated react-native-vector-icons/common to 13.0.0。react-native-vector-icons/common是全部图标家族包共享的运行时核心库包含createIconSet、动态字体加载、getImageSource等能力见 packages/common/src。common 的 12.x → 13.x 属于跨大版本升级因此本包同步升到 1.0.0 以对齐。在 package.json 中可以看到该依赖以workspace:^声明表明在 monorepo 内通过 pnpm workspace 关联。2.6 Expo 配置插件1.1.0 / 1.1.11.1.0 引入 Expo 配置插件config plugin1.1.1 随即修复了插件导出问题。仓库中的 app.plugin.js 是插件的真实实现核心逻辑module.exports (config) withInfoPlist(config, (c) { const projectRoot c.modRequest.projectRoot; const appPkg JSON.parse(fs.readFileSync(path.join(projectRoot, package.json), utf-8)); const fontDirName appPkg.reactNativeVectorIcons?.fontDir || rnvi-fonts; const fontsDir path.join(projectRoot, fontDirName, fontawesome-pro-duotone-solid); // 校验目录存在且有 .ttf否则抛错 // 将所有 .ttf 追加进 iOS 的 UIAppFonts c.modResults.UIAppFonts [...new Set([...(c.modResults.UIAppFonts || []), ...fonts])]; return c; });实现要点插件通过withInfoPlist修改 iOS 的 Info.plist把rnvi-fonts/fontawesome-pro-duotone-solid/下的所有.ttf追加到UIAppFonts字体目录名可通过应用package.json中的reactNativeVectorIcons.fontDir配置覆盖默认rnvi-fonts目录不存在或没有.ttf时会抛出明确错误引导开发者查看包 README[...new Set(...)]去重避免重复注册字体。1.1.1 的 expo plugin exports 修复针对的是包exports字段中./app.plugin.js子路径的导出可用性——Expo 通过该子路径解析插件入口若缺失会导致插件无法被识别。三、为什么需要自己提供字体Pro 字体的分发限制Font Awesome Pro 属于商业字体不能随开源 npm 包分发因此 react-native-vector-icons 仓库对 Pro 系列包统一采用包内只含 glyphmap 映射 组件代码字体文件由授权用户放入约定目录的机制。官方提供的获取途径见 apps/icon-explorer/scripts/fetch-pro-fonts.ts通过 Font Awesome 官方 npm registry 下载 Pro 字体需要开发者先在 Font Awesome 账户页面获取 npm token并以npm config set //npm.fontawesome.com/:_authToken token方式配置。脚本还利用 fontToolsPython3读取字体文件 name 表中的 PostScript 名nameID 6与包内.yo-rc.json中记录的期望文件名比对后重命名确保放入目录的文件名与fontFileName完全一致。这一点与 src/index.ts 中声明的fa-duotone-900.ttf相互印证。四、实战接入指南4.1 安装npm install react-native-vector-icons/fontawesome-pro-duotone-solid包发布产物支持 CommonJS / ESM 双格式与 TypeScript 类型由 react-native-builder-bob 构建见 package.json 的react-native-builder-bob配置exports字段同时提供import与require两种入口。4.2 放置字体文件关键步骤将你获得的合法授权字体文件放到项目根目录的约定位置rnvi-fonts/fontawesome-pro-duotone-solid/fa-duotone-900.ttfiOS 与 Android 的构建过程会自动把该目录下的字体拷贝进应用。需要留意的是iOS纯 RN / CocoaPods由 react-native-vector-icons-fontawesome-pro-duotone-solid.podspec 负责——它在 pod 安装时从应用根目录的rnvi-fonts/fontawesome-pro-duotone-solid/读取所有.ttf拷贝进 pod 的fonts/目录并通过s.resources fonts/*.ttf注册为资源找不到目录或文件时同样会抛出带(RNVI-fontawesome-pro-duotone-solid)前缀的明确错误iOSExpo走 4.4 节的配置插件Android构建脚本在打包阶段收集rnvi-fonts下的字体与仓库中其他字体包机制一致。4.3 组件用法import { FontAwesomeProDuotoneSolid } from react-native-vector-icons/fontawesome-pro-duotone-solid; // ... FontAwesomeProDuotoneSolid namehouse color#ff0000 size{20} /组件支持name、size、color等标准 props其实现来自 packages/common/src/create-icon-set.tsx 的createIconSet内部通过String.fromCodePoint(glyph)将 glyphmap 中的码点转换为字符以Text渲染并分别按平台选择fontFamilyiOS 用 PostScript 名、Android 用字体 basename、Windows 用Assets路径。在 RN 0.70 环境下动态字体加载开启且配置了fontSource还支持运行时按需加载字体。此外可通过FontAwesomeProDuotoneSolidIconName类型获得图标名的完整联合类型keyof typeof glyphMap让 TS 在写错图标名时直接报错import { FontAwesomeProDuotoneSolid, type FontAwesomeProDuotoneSolidIconName } from react-native-vector-icons/fontawesome-pro-duotone-solid; const name: FontAwesomeProDuotoneSolidIconName house; // 类型安全4.4 Expo 项目接入在app.json或app.config.js的plugins数组中加入本包{ expo: { plugins: [react-native-vector-icons/fontawesome-pro-duotone-solid] } }构建时插件会自动把rnvi-fonts/fontawesome-pro-duotone-solid/下的字体注册到 iOSUIAppFonts。注意包名以react-native-vector-icons/为作用域请确保安装的版本 ≥ 1.1.01.1.1 修复了插件导出问题建议直接使用 1.1.1。更完整的 Expo 配置说明可参考仓库的 docs/SETUP-EXPO.md。五、版本选择建议与注意事项当前最新稳定版为 1.1.2依赖react-native-vector-icons/common13.0.1对应上游 Font Awesome 7.2.0 字体包本身要求node 18.0.0peer 依赖react、react-nativeexpo/config-plugins 10.0.0为可选仅 Expo 插件场景需要字体文件缺失时iOS 侧 podspec、Expo 插件都会在构建阶段主动抛错而不是静默失败这正是为了把忘了放字体的问题前置暴露版本号与上游字体版本无一一对应关系升级包后请核对 CHANGELOG 中是否有 upgrade Font Awesome 记录以确定是否需要同步更换字体文件例如 0.1.2 将上游从 7.1.0 升到 7.2.0。六、总结react-native-vector-icons/fontawesome-pro-duotone-solid的 CHANGELOG 虽短却浓缩了该包从 v7 化重构、Android 权限修复、静态导出、common 大版本对齐到 Expo 插件完备化的完整生命周期。它体现了 react-native-vector-icons 在 v13 时代的模块化设计哲学图标族一包一风格、字体自备、渲染靠 common 共享内核、原生侧保持最简。开发者接入时只要遵循安装包 → 放入字体 → 按平台配置三步流程即可在 React Native 与 Expo 应用中稳定使用 Font Awesome Pro Duotone Solid 图标。赞分享UI组件移动开发【免费下载链接】react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.项目地址https://gitcode.com/gh_mirrors/re/react-native-vector-icons点击查看免费下载相关推荐MTSplice在RNA研究中的应用探索遗传变异与疾病关联的新工具MTSplice在RNA研究中的应用探索遗传变异与疾病关联的新工具 MTSplice是一款强大的RNA分析工具专门用于预测遗传变异对组织特异性剪接的影响。作UI组件移动开发React Native Vector Icons 之 FontAwesome Pro Duotone Regular 字体包接入指南React Native Vector Icons 之 FontAwesome Pro Duotone Regular 字体包接入指南 本文以 react nUI组件移动开发react-native-vector-icons 的 FontAwesome Pro Sharp Solid 字体包接入实战指南react native vector icons 的 FontAwesome Pro Sharp Solid 字体包接入实战指南 导读 react natiUI组件移动开发上一篇LibreHardwareMonitor零成本硬件健康观测终极指南下一篇GARbro源码分析核心模块实现详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考