Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases

Console

as

新手入门
设计和开发
应用发布
参考
支持

react-native-vector-icons

react-native-vector-icons

@amazon-devices/react-native-vector-icons在Vega上提供对react-native-vector-icons的支持。该库提供可自定义的矢量图标，非常适合装饰按钮、标志和导航栏或选项卡栏，可以无缝集成到您的项目中。它们的多功能性使扩展和样式设定都很轻松。

这是一个系统部署的库，可供适用于Vega的React Native应用使用，无需单独的安装过程。它作为自动链接库进行部署，您的应用在运行时会链接到该库。只能在库和为其构建的适用于Vega的React Native版本之间保证兼容性。

当您升级用于构建应用的适用于Vega的React Native版本时，最佳实践是同时升级它所依赖的库的版本。

有关此库及其API的更多信息，请参阅GitHub存储库中的README.md（仅提供英文版）。

安装

  1. 在package.json文件中添加JavaScript库依赖项。

    已复制到剪贴板。

    "dependencies": {
   ...
   "@amazon-devices/react-native-vector-icons": "~2.0.0"
}

  2. 使用npm install命令重新安装依赖项。

  3. 将您的字体文件添加到<应用程序包根目录>/assets/fonts

升级

升级此程序包通常也需要更新链接到您的项目的字体文件。如果自动链接对您有用，再次运行它应该会更新字体。否则，您需要按照安装部分中概述的步骤进行操作。

示例

IconExplorer

在GitHub react-native-vector-icons存储库的packages/icon-explorer中试用IconExplorer项目。您还可以在那里搜索任何图标。

IconExplorer的屏幕截图

基本示例

下面显示了返回图标的基本示例：

已复制到剪贴板。


import Icon from '@amazon-devices/react-native-vector-icons/Ionicons';

function ExampleView(props) {
  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}

TabBar

下面的示例显示了如何实现TabBar。

下面的示例取自react-navigation：

已复制到剪贴板。


import { createBottomTabNavigator } from '@amazon-devices/react-navigation/bottom-tabs';
import MaterialCommunityIcons from '@amazon-devices/react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

API支持

Icon组件

您可以使用库自带的图标之一（例如，下面的示例使用FontAwesome.js中的图标），也可以创建自己的自定义字体。

已复制到剪贴板。


import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;

属性

任何Text属性以及以下属性：

属性 描述 默认值
size 图标的大小，也可以在样式对象中作为fontSize传递。 12
name 要显示什么图标，请参阅Icon Explorer应用或上面的链接之一。 （无）
color 图标的颜色 （继承）

静态方法

属性 描述
getFontFamily 返回当前用于以文本形式检索图标的字体系列。用法：const fontFamily = Icon.getFontFamily()
getImageSource 返回一个承诺，该承诺解析为图标的位图版本的源，以供Image组件等使用。用法：const source = await Icon.getImageSource(name, size, color)
getImageSourceSync 与getImageSource相同，不过为同步进行。用法：const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap 返回图标集的原始字形映射。用法：const glyphMap = Icon.getRawGlyphMap()
hasIcon 检查该名称在当前图标集中是否有效。用法：const isNameValid = Icon.hasIcon(name)

样式

由于Icon基于Text组件构建，因此大多数样式属性将按预期运行，您可能会发现尝试使用这些属性很有用：

  • backgroundColor
  • borderWidth
  • borderColor
  • borderRadius
  • padding
  • margin
  • color
  • fontSize

通过组合其中一些您可以创建如下所示的内容：

type star

Icon.Button 组件

一个方便的组件，用于创建左侧带有图标的按钮。

已复制到剪贴板。


import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

按钮

属性

除以下属性之外的任何Text、TouchableHighlight或TouchableWithoutFeedback属性：

属性 描述 默认值
color 文本和图标颜色，如果您需要不同的颜色，可使用iconStyle或嵌套Text组件。 white
size 图标大小。 20
iconStyle 样式仅适用于图标，适合设置边距或不同的颜色。注意：对边距使用iconStyle，否则会出现不稳定的行为。 {marginRight: 10}
backgroundColor 按钮的背景颜色。 #007AFF
borderRadius 按钮的边框半径，设置为0可将其禁用。 5
onPress 按下按钮时调用的函数。 （无）

用作PNG图像/源对象

这是将此项插入依赖位图图像而不是可缩放矢量图标的其他组件的便捷方法。采用上述参数name、size和color。

已复制到剪贴板。


Icon.getImageSource('user', 20, 'red').then(source =>
  this.setState({ userIcon: source })
);

或者，您可以使用同步方法Icon.getImageSourceSync来避免出现故障。请记住，此方法会产生阻塞并可能导致性能损失。但是，后续调用将使用缓存。

多样式字体

如今的某些字体使用多种样式，例如该库支持样式FontAwesome 5。其用法与标准Icon组件几乎相同：

已复制到剪贴板。


import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // 默认为常规
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // 仅在FA5 Pro中

静态方法

多样式字体支持Icon中的所有静态方法。

属性 描述
getFontFamily 返回当前用于以文本形式检索图标的字体系列。用法：const fontFamily = Icon.getFontFamily(style)
getImageSource 返回一个承诺，该承诺解析为图标的位图版本的源，以供Image组件等使用。用法：const source = await Icon.getImageSource(name, size, color)
getImageSourceSync 与getImageSource相同，不过为同步进行。用法：const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap 返回图标集的原始字形映射。用法：const glyphMap = Icon.getRawGlyphMap(style)
hasIcon 检查该名称在当前图标集中是否有效。用法：const isNameValid = Icon.hasIcon(name, style)
getStyledIconSet 使用此项来获取单一样式的Icon组件。用法：const StyledIcon = Icon.getStyledIconSet(style)

如果没有传递任何样式参数（或者它无效），则这些方法将默认设置为预定义的回退。

组件

支持Icon.Button，用法和Icon一样：

已复制到剪贴板。


import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome5';
const myButton = (
  <Icon.Button name="facebook" onPress={this.loginWithFacebook} solid>
    Login with Facebook
  </Icon.Button>
);

自定义字体

createIconSet(glyphMap, fontFamily[, fontFile])

根据glyphMap返回您自己的自定义字体，其中键是图标名称，值是UTF-8字符或其字符代码。fontFamily是字体的名称，而非文件名。在Font Book应用或类似应用中打开字体以了解名称。

已复制到剪贴板。


import { createIconSet } from '@amazon-devices/react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');

createIconSetFromFontello(config[, fontFamily[, fontFile]])

这是基于fontello配置文件创建自定义字体的便捷方法。别忘了如上所述导入字体，然后将config.json拖放到项目中便利的位置。

已复制到剪贴板。


import { createIconSetFromFontello } from '@amazon-devices/react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

已复制到剪贴板。


import { createIconSetFromIcoMoon } from '@amazon-devices/react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'LineAwesome',
  'line-awesome.ttf'
);

确保您使用的是IcoMoon中的Download（下载）选项，并使用您下载的.zip中包含的.json文件。您还需要按照上述说明将.ttf字体文件导入您的项目中。

createMultiStyleIconSet(styles [, options])

已复制到剪贴板。


import { createMultiStyleIconSet } from '@amazon-devices/react-native-vector-icons';

/*
 * 这只是示例代码，您可以自由地
 * 根据自己的喜好设计字形映射和样式
 */

import glyphmap from './glyphmap.json';
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object.keys(glyphmap); /* ["style1", "style2"] */
const options = {
  defaultStyle: 'style1',
  glyphValidator: (name, style) => glyphKeys.indexOf(name) !== -1,
  fallbackFamily: (name) => {
    for (let i = 0; i < glyphKeys.length; i++) {
      const style = glyphKeys[i];
      if (glyphmap[style].indexOf(name) !== -1) {
        return style;
      }
    }

    /* 始终返回一些系列 */
    return glyphKeys[0];
  }
};

/*
 * 样式对象由键（将在以后
 * 用作样式）和对象（将用作
 * 字体的样式对象）组成。样式
 * 应当对每种字体具有独特的特征，
 * 以便确保选择正确的
 * 字体。自从版本5.7.0之后，FontAwesome 5
 * 使用字体粗细，以便于区分样式，
 * 但是可以使用其他属性（如fontFamily）。
 * 它只是一个标准RN样式对象。
 */
const styles = {
  style1: {
    fontWeight: '700'
  },
  style2: {
    fontWeight: '100'
  }
};

const Icon = createMultiStyleIconSet(styles, options);

/* 使用默认样式 (style1) */
<Icon name={'hello'} />
<Icon name={'world'} style1 />
/* 默认样式为style1，但这样将回退到style2 */
<Icon name={'foo'} />
/* 这样也会回退到style2* /
<Icon name={'foo'} style1 />
/* 常规使用style2 */ 
<Icon name={'bar'} style2 />
选项 描述 default
defaultStyle 在呈现期间未提供样式时使用的样式的名称。 Object.keys(styles)[0]
fallbackFamily 用于在字形不可用时选择系列的函数。该函数应接受将字形的name作为参数。返回系列的名称 (name) => Object.keys(styles)[0]
glyphValidator 用于验证字形是否可用于所选样式的函数。它有name和style作为参数，并采用该顺序。如果字形有效，则返回true；如果无效，则返回false。 (name, style) => true

动画

React Native自带了一个名为Animated的动画库。要将其与图标一起使用，只需使用以下行创建动画组件即可：const AnimatedIcon = Animated.createAnimatedComponent(Icon)

支持的版本

程序包名称 亚马逊NPM库版本 Vega OS内部版本号 Vega SDK版本 发行说明
@amazon-devices/react-native-vector-icons 2.0.1+9.2.0 OS 1.1 (201010438050) 0.20  

Last updated: 2025年9月30日

关注我们:
amazon_developer_logo

© 2010-2025 年，亚马逊公司或其附属公司. 保留所有权利。

协议

开发人员博客

联系我们