react-native-vector-icons - Amazon Vega Docs

@amazon-devices/react-native-vector-icons库在Vega上提供对react-native-vector-icons的支持。该库提供可自定义的矢量图标，非常适合装饰按钮、标志和导航栏或选项卡栏，可以无缝集成到您的项目中。它们的多功能性使扩展和样式设定都很轻松。此库由系统部署，可供适用于Vega的React Native应用使用，无需单独的安装过程。此库作为自动链接库进行部署，您的应用在运行时会链接到该库。该库保证仅与为之构建的适用于Vega的React Native版本兼容。升级应用的适用于Vega的React Native版本时，可以考虑升级其库依赖关系的最佳实践。有关此库及其API的更多信息，请参阅GitHub存储库中的README.md（仅提供英文版）。

安装

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

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

使用npm install命令重新安装依赖项。
将您的字体文件添加到<app_package_root>/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`	要显示的图标的名称。	（无）
`color`	图标的颜色	（继承）

方法

以下是静态方法。 | 方法 | 描述 | |——|———– | | getFontFamily | 返回当前用于以文本形式检索图标的字体系列。用法：const fontFamily = Icon.getFontFamily() | |getImageSource| Returns a promise that resolves to the source of a bitmap version of the icon for use withImagecomponent. Usage:const source = await Icon.getImageSource(name, size, color)| |getImageSourceSync| Same asgetImageSourcebut synchronous. Usage:const source = Icon.getImageSourceSync(name, size, color)| |getRawGlyphMap| Returns the raw glyph map of the icon set. Usage:const glyphMap = Icon.getRawGlyphMap()| |hasIcon| Checks if the name is valid in current icon set. Usage:const isNameValid = Icon.hasIcon(name)` |

样式

Icon建立在Text组件之上，因此大多数样式属性都正常有效。试试以下属性：

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

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来避免出现故障。请记住，此方法会产生阻塞并可能导致性能损失。后续调用使用缓存。

多样式字体

react-native-vector-icons库支持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`	返回一个Promise，该Promise通过`name`参数解析为（指定图标）位图版本的位置。使用此属性检索图标位置，以便与诸如`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 />

选项	描述	默认值
`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

​安装

​升级

​示例

​IconExplorer

​基本示例

​TabBar

​API参考

​Icon组件

​属性

​方法

​样式

​Icon.Button组件

​属性

​用作PNG图像/源对象

​多样式字体

​方法

​组件

​自定义字体

​createIconSet(glyphMap, fontFamily[, fontFile])

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

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

​createMultiStyleIconSet(styles [, options])

​动画

​支持的版本

安装

升级

示例