十八、Expo 指南之图标（icon)

图标

虽然现在很流行，但并不是每个应用程序都必须使用表情符号来表示所有图标 - 也许你想通过像FontAwesome，Glyphicons或Ionicons这样的图标字体来引入一个流行的集合，或者你只是使用一些你仔细从PNG中挑选出来的（Expo目前不支持SVG）。让我们来看看如何做这两种方法。

@expo/vector-icons

默认情况下，此库安装在通过的模板项目上expo init- 它是expo包的一部分。它包括流行的图标集，您可以使用@ expo / vector-icons目录浏览所有图标。

importReactfrom'react';import{Ionicons}from'@expo/vector-icons';exportdefaultclassIconExampleextendsReact.Component{render(){return();}}

如果尚未加载Ionicons字体，该组件将加载Ionicons字体，并呈现在通过上面提到的vector-icons目录找到的复选标记图标。@expo/vector-icons建立在react-native-vector-icons之上，并使用类似的API。唯一的区别是@expo/vector-icons使用更惯用的import风格：

import { Ionicons } from '@expo/vector-icons';而不是.. import Ionicons from 'react-native-vector-icons/Ionicons';。

注意：与Expo中的任何自定义字体一样，您可能希望在呈现应用程序之前预先加载图标字体。字体对象可作为字体部件上的静态属性，所以在上述情况下是Ionicons.font，加载{ionicons: require('path/to/ionicons.ttf')}。了解更多关于预加载的资产。

自定义图标字体

首先，确保导入自定义图标字体。详细了解如何加载自定义字体。加载字体后，您需要创建一个图标集。@expo/vector-icons公开三种方法来帮助您创建图标集。

createIconSet

根据glyphMap键是图标名称的位置返回您自己的自定义字体，值为UTF-8字符或其字符代码。fontFamily是字体的名称而不是文件名。有关更多详细信息，请参阅react-native-vector-icons。

import{Font}from'expo';import{createIconSet}from'@expo/vector-icons';constglyphMap={'icon-name':1234,test:'∆'};constCustomIcon=createIconSet(glyphMap,'FontName');exportdefaultclassCustomIconExampleextendsReact.Component{state={fontLoaded:false}asynccomponentDidMount(){awaitFont.loadAsync({'FontName':require('assets/fonts/custom-icon-font.ttf')});this.setState({fontLoaded:true});}render(){if(!this.state.fontLoaded){returnnull;}return();}}

createIconSetFromFontello

基于Fontello配置文件创建自定义字体的便捷方法。不要忘记按上述方法导入字体，然后使用，将其config.json放在项目中方便的位置Font.loadAsync。

// Once your custom font has been loaded...import{createIconSetFromFontello}from'@expo/vector-icons';importfontelloConfigfrom'./config.json';constIcon=createIconSetFromFontello(fontelloConfig,'FontName');

createIconSetFromIcoMoon

基于IcoMoon配置文件创建自定义字体的便捷方法。不要忘记按上述方法导入字体，然后使用，将其config.json放在项目中方便的位置Font.loadAsync。

// Once your custom font has been loaded...import{createIconSetFromIcoMoon}from'@expo/vector-icons';importicoMoonConfigfrom'./config.json';constIcon=createIconSetFromIcoMoon(icoMoonConfig,'FontName');

图标图像

如果您知道如何使用react-native 组件，这将是一件轻而易举的事。

importReactfrom'react';import{Image}from'react-native';exportdefaultclassSlackIconextendsReact.Component{render(){return();}}

假设我们的SlackIcon类位于my-project/components/SlackIcon.js，我们的图标图像位于my-project/assets/images，以便引用我们使用的图像并包括相对路径。您可以提供各种像素密度的图标版本，并自动为您使用相应的图像。在这个例子中，我们实际上有[email protected]和[email protected]，所以如果我认为这在iPhone 6S的图像，我会看到的是[email protected]。更多相关信息，请参阅react-native文档中的Images指南。

我们还设置了fadeDuration（一个Android特定属性），0因为我们通常希望图标立即显示而不是在几百毫秒内淡入淡出。