图标

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

并非每个应用都需要使用表情符号作为图标。你可以通过图标字体（例如 FontAwesome、Glyphicons 或 Ionicons）使用流行的图标集，或者选择 名词项目 中的 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 * as React from 'react';
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')}。

¥As with any custom font in Expo, you can preload icon fonts before rendering your app. The font object is available as a static property on the font component. So, in the case above, it is Ionicons.font, which evaluates to {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 公开了三种方法来帮助你创建图标集：

¥@expo/vector-icons exposes three methods to help you create an icon set:

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 * as React from 'react';
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.

请参阅下面的示例，该示例使用 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 保存在项目中方便的位置，最好是在 asset 目录中，然后使用 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');

图标图片

¥Icon images

你可以使用 Expo 图片 或 React Native 中的 Image 组件来显示图标。source 属性采用相对路径来引用图片。

¥You can use the Image component from Expo Image or React Native to display an icon. The source prop takes the relative path to refer to the image.

import { Image } from 'expo-image';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/images/slack-icon.png')} style={{ width: 50, height: 50 }} />
    </View>
  );
}

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

import { Image, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/images/slack-icon.png')} style={{ width: 50, height: 50 }} />
    </View>
  );
}

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

你还可以提供不同像素密度的不同版本的图标。Image 组件负责自动使用具有适当像素密度的图片。例如，如果图片具有 icon@2x.png 和 icon@3x.png 等变体，则 @2x 后缀用于表示 iPhone 8 等较旧设备的设备屏幕密度，而 @3x 后缀用于表示 iPhone 13 等较新设备上的设备屏幕密度。在 React Native 文档中了解有关提供不同密度的更多信息。

¥You can also provide different versions of your icon at various pixel densities. The Image component takes care of using the image with appropriate pixel density automatically. For example, if the image has variants such as icon@2x.png and icon@3x.png, the @2x suffix is served for a device's screen density for older devices such as iPhone 8 and the @3x suffix is served for a device's screen density on newer devices such as iPhone 13. Learn more about serving different densities in React Native documentation.

按钮组件

¥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: