Ant Design 是一个知名的 UI 组件库，提供了丰富的 React 组件和图标集。@ant-design/icons-react-native 是 Ant Design 提供的图标库，专为 React Native 开发者提供的，使得在移动应用中快速使用 Ant Design 图标非常方便。本文将介绍如何使用该 npm 包。
安装
在新建 React Native 项目后，通过 npm 下载 @ant-design/icons-react-native：
npm install @ant-design/icons-react-native
使用
导入
下载完成后，在 js 文件中按如下方式导入：
import { createIconSet } from '@ant-design/icons-react-native';引用字体图标
使用 @ant-design/icons-react-native 提供的 createIconSet 方法，我们将字体图标库打包到应用中：
const glyphMap = {
"iconName": "这里输入 Ant Design 字体图标名称"
};
const iconSet = createIconSet(glyphMap, 'AntDesign');
export default iconSet;这里只需要将上述代码复制到一个新的 js 文件中（例如 Icon.js），并将字体图标名称替换为自己需要的图标名称。这里的“字体图标名称”是以 Ant Design 提供的字体图标为准的，可以在官网页面查看相应名称。
使用 Icon 组件
安装依赖和打包字体图标库后，我们创建 Icon 组件并将它作为组件的属性传递给需要使用图标的页面或组件中。例如，在一个 Button 组件中使用 Icon 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ---- ---- ---------
----- --------- - -- -------- ------ -------- -- -- -
----------------- ----------------- ----------------------
----- --------------- --------- ------------------- --
----- -----------------------------------
-------------------
--
------ ------- ----------示例代码
下面是一个完整的示例代码，供大家参考：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ---------------------------------
------ - ----- ----- ---------------- - ---- ---------------
------ ---- ---- ---------
----- -------- - -
--------- ---------
------- ---------
----------- ---------
--
----- ------- - ----------------------- -------------
----- --------- - -- -------- ------ -------- -- -- -
----------------- ----------------- ----------------------
----- --------------- --------- ------------------- --
----- -----------------------------------
-------------------
--
----- --- - -- -- -
----- -------------------------
----- --------------------------------------------------- -----------
---------- ----------- -- --- ---------- ----------------- --
---------- ----------- -- --- ---------- --------------- --
---------- ----------- -- --- ---------- ------------------- --
-------
--
------ ------- ----
----- ------ - -
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
----------- -------
------------- ---
--
------- -
-------------- ------
----------- ---------
------------- --
-------- ---
------------ --
------------- ---
------ ------
--
----- -
------------ ---
--
------ -
----------- -------
--
--结语
本文介绍了如何使用 @ant-design/icons-react-native 打包 Ant Design 字体图标并使用 Icon 组件在 React Native 应用中使用。希望本文能够对读者有所帮助，愿大家在开发中得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136687