Expo 矢量图标

了解如何在 Expo 应用中使用各种类型的图标，包括 React Native 矢量图标、自定义图标字体、图标图片和图标按钮。

并非每个应用都需要使用表情符号作为图标。你可以通过图标字体（如 FontAwesome、Glyphicons 或 Ionicons）使用流行的图标集，或者从 The Noun Project 选择 PNG 图标。本指南解释了在你的 Expo 应用中使用图标的各种方法。

🌐 Not every app needs to use emojis for icons. You can use a popular icon set through an icon font such as FontAwesome, Glyphicons, or Ionicons, or choose PNGs from The Noun Project. This guide explains various ways to use icons in your Expo app.

@expo/vector-icons

@expo/vector-icons 库在使用 npx create-expo-app 的模板项目中默认安装，是 expo 包的一部分。它构建在 react-native-vector-icons 之上，并使用类似的 API。它包含流行的图标集合，你可以在 icons.expo.fyi 浏览。

🌐 The @expo/vector-icons library is installed by default on the template project using npx create-expo-app and is part of the expo package. It is built on top of react-native-vector-icons and uses a similar API. It includes popular icon sets you can browse at icons.expo.fyi.

该组件加载 Ionicons 字体，并在以下示例中渲染一个勾选图标：

🌐 The component loads the Ionicons font and renders a checkmark icon in the following example:

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')}。

自定义图标字体

🌐 Custom icon fonts

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

🌐 To use a custom icon font, first import it into your project. Only after the font has loaded, can you create an Icon set. Learn more about loading custom fonts.

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

createIconSet

createIconSet 方法根据 glyphMap 返回自定义字体，其中键是图标名称，值是 UTF-8 字符或其字符代码。

🌐 The createIconSet method returns a custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or its character code.

在下面的示例中，glyphMap 对象被定义，然后作为第一个参数传递给 createIconSet 方法。第二个参数 fontFamily 是字体名称（不是文件名）。可选地，你可以传递第三个参数以支持 Android，这是自定义字体文件名。

🌐 In the example below, the glyphMap object is defined and then passed as the first argument to the createIconSet method. The second argument fontFamily is the name of the font (not the filename). Optionally, you can pass the third argument for Android support, which is the custom font file name.

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 方法来加载字体。

🌐 The createIconSetFromIcoMoon method is used to create a custom font based on an IcoMoon config file. You have to save the selection.json and .ttf in your project, preferably in the assets directory, and then load the font using either useFonts hook or Font.loadAsync method from expo-font.

IcoMoon 应用版本： 新的 IcoMoon 应用 导出的 JSON 格式与旧的 IcoMoon 应用 不同。当前的 createIconSetFromIcoMoon 函数仅支持旧应用的输出。请查看 GitHub 上的拉取请求，该请求增加了对新格式的支持。此支持将在 @expo/vector-icons 发布后生效。

请参见下面使用 useFonts 钩子加载字体的示例：

🌐 See the example below that uses the useFonts hook to load the font:

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'),
  });

  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 方法来加载字体。

🌐 The createIconSetFromFontello method is used to create a custom font based on a Fontello config file. You have to save the config.json and .ttf somewhere convenient in your project, preferably in the assets directory, and then load the font using either useFonts hook or Font.loadAsync method from expo-font.

它遵循与示例中所示的 createIconSetFromIcoMoon 类似的配置：

🌐 It follows a similar configuration as createIconSetFromIcoMoon as shown in the example:

// Import the createIconSetFromFontello method
import createIconSetFromFontello from '@expo/vector-icons/createIconSetFromFontello';

// Import the config file
import fontelloConfig from './config.json';

// Both the font name and files exported from Fontello are most likely called "fontello".
// Ensure this is the `fontname.ttf` and not the file path.
const Icon = createIconSetFromFontello(fontelloConfig, 'fontello', 'fontello.ttf');

按钮组件

🌐 Button component

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

🌐 You can create an Icon Button using the Font.Button syntax where the Font is the icon set that you import from @expo/vector-icons.

在下面的示例中，登录按钮使用了 FontAwesome 图标集。请注意，FontAwesome.Button 组件接受 props 来处理按钮被按下时的动作，并可以封装按钮的文本。

🌐 In the example below, a login button uses the FontAwesome icon set. Notice that the FontAwesome.Button component accepts props to handle action when a button is pressed and can wrap the text of the 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('Button pressed');
  };

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

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

属性

🌐 Properties

除了这些之外的任何 Text、TouchableHighlight 或 TouchableWithoutFeedback 属性：

🌐 Any Text, TouchableHighlight, or TouchableWithoutFeedback property in addition to these: