Expo 矢量图标

编辑页面

了解如何在你的 Expo 应用中使用各种类型的图标，包括 react native vector icons、自定义图标字体、图标图片和图标按钮。

您可以通过图标字体（如 FontAwesome、Glyphicons 或 Ionicons）使用流行的图标集，或者从 The Noun Project 选择 PNG。本指南将介绍在 Expo 应用中使用图标的各种方法。

`@expo/vector-icons`

@expo/vector-icons 将被弃用，不推荐使用。了解更多迁移到 @react-native-vector-icons 的方法。

@expo/vector-icons 库建立在 react-native-vector-icons 之上，并使用类似的 API。它包含了你可以在 icons.expo.fyi 浏览的热门图标集。

下面的示例中，组件会加载 Ionicons 字体并渲染一个对勾图标：

矢量图标

import { View, StyleSheet } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';

export default function App() {
  return (
    <View style={styles.container}>
      <Ionicons name="checkmark-circle" size={32} color="green" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

与 Expo 中的任何自定义字体一样，你可以在渲染应用之前预加载图标字体。字体对象作为字体组件的静态属性提供。因此，在上面的例子中，它是 Ionicons.font，其值为 {ionicons: require('path/to/ionicons.ttf')}。

自定义图标字体

要使用自定义图标字体，首先将其导入到你的项目中。只有在字体加载完成后，你才能创建一个 Icon 集合。了解更多关于加载自定义字体。

@expo/vector-icons 提供了三种方法来帮助你创建图标集合：

`createIconSet`

createIconSet 方法会基于 glyphMap 返回一个自定义字体，其中键是图标名称，值可以是 UTF-8 字符或其字符编码。

在下面的示例中，定义了 glyphMap 对象，然后将其作为 createIconSet 方法的第一个参数传入。第二个参数 fontFamily 是字体名称（不是文件名）。可选地，你还可以传入第三个参数用于 Android 支持，也就是自定义字体文件名。

createIconSet 示例

import createIconSet from '@expo/vector-icons/createIconSet';

const glyphMap = { 'icon-name': 1234, test: '∆' };
const CustomIcon = createIconSet(glyphMap, 'fontFamily', 'custom-icon-font.ttf');

export default function CustomIconExample() {
  return <CustomIcon name="icon-name" size={32} color="red" />;
}

`createIconSetFromIcoMoon`

createIconSetFromIcoMoon 方法用于基于 IcoMoon 配置文件创建自定义字体。你需要将 selection.json 和 .ttf 保存到项目中的某个位置，最好放在 assets 目录下，然后使用 useFonts 钩子或 expo-font 中的 Font.loadAsync 方法加载字体。

IcoMoon 应用版本：新版 IcoMoon 应用导出的 JSON 格式与旧版 IcoMoon 应用不同。当前的 createIconSetFromIcoMoon 函数只支持旧版应用的输出。请参见 GitHub 上的 Pull Request，其中添加了对新格式的支持。该支持将在 @expo/vector-icons 发布后生效。

下面的示例使用 useFonts 钩子来加载字体：

IcoMoon 图标

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useFonts } from 'expo-font';
import createIconSetFromIcoMoon from '@expo/vector-icons/createIconSetFromIcoMoon';

const Icon = createIconSetFromIcoMoon(
  require('./assets/icomoon/selection.json'),
  'IcoMoon',
  'icomoon.ttf'
);

export default function App() {
  const [fontsLoaded] = useFonts({
    IcoMoon: require('./assets/icomoon/icomoon.ttf'),
  });

  // 有关在字体加载完成时如何显示启动画面的更多信息，请参阅 /develop/user-interface/fonts/#wait-for-fonts-to-load 中的“等待字体加载”部分。
  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Icon name="pacman" size={50} color="red" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

`createIconSetFromFontello`

createIconSetFromFontello 方法用于基于 Fontello 配置文件创建自定义字体。你需要将 config.json 和 .ttf 保存到项目中的某个方便位置，最好放在 assets 目录下，然后使用 useFonts 钩子或 expo-font 中的 Font.loadAsync 方法加载字体。

它的配置方式与 createIconSetFromIcoMoon 类似，如下例所示：

Fontello 图标

// 导入 createIconSetFromFontello 方法
import createIconSetFromFontello from '@expo/vector-icons/createIconSetFromFontello';

// 导入配置文件
import fontelloConfig from './config.json';

// Fontello 导出的字体名称和文件通常都叫做 "fontello"。
// 请确保这是 `fontname.ttf`，而不是文件路径。
const Icon = createIconSetFromFontello(fontelloConfig, 'fontello', 'fontello.ttf');

按钮组件

你可以使用 Font.Button 语法创建一个图标按钮，其中 Font 是你从 @expo/vector-icons 导入的图标集合。

在下面的示例中，一个登录按钮使用了 FontAwesome 图标集。请注意，FontAwesome.Button 组件接受用于处理按钮按下时动作的属性，并且可以包裹按钮文本。

图标按钮组件

import React from 'react';
import { View, StyleSheet } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

export default function App() {
  const loginWithFacebook = () => {
    console.log('按钮被按下');
  };

  return (
    <View style={styles.container}>
      <FontAwesome.Button name="facebook" backgroundColor="#3b5998" onPress={loginWithFacebook}>
        使用 Facebook 登录
      </FontAwesome.Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

属性

除了这些之外，还包括任何 Text、TouchableHighlight 或 TouchableWithoutFeedback 属性：

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