Android和iOS的矢量图标

Question

在https://www.npmjs.com/package/react-native-ionicons中，我们提供了两种方法来为ios和android加载图标。我用@ expo / vector-icons的v9.0.0尝试了两种方法。

我使用以下语句导入爱奥尼亚子：

import { Ionicons } from '@expo/vector-icons';

1. 从名称中删除ios / md

<Ionicons name="close-circle" size={25} style={{color: 'white'}} />

我收到以下错误，其他图标名称也会发生此错误：

  

警告：道具类型失败：值“ close-circle”的道具名称无效   提供给Icon，应该是其中之一...

1. 如果我改为通过ios / android属性，则图标不会显示，并且我也不会收到警告，例如：

<Ionicons ios="ios-close-circle" android="md-close-circle" size={25} style={{color: 'white'}} />

我当前的修订基于How can I create cross platform icon in react native?。我使用：

<Ionicons name={${Platform.OS === "ios" ? "ios" : "md"}-close-circle} size={25} style={{color: 'white'}} />

有没有更简单的方法？

谢谢！

Answer 1

嘘，警告提示您提供的名称与爱奥尼克斯的图标不匹配。两种解决方法是

1. 将正确的名称传递给组件。查找所有名称visit here
2. 从'@ expo / vector-icons / Ionicons'中导入离子。

希望对您有帮助！

Answer 2

看来这是我的疏忽。 @ expo / vector-icons的自述文件指出：

  

此库是围绕的兼容性层   @ oblador / react-native-vector-icons与世博会资产系统配合使用。

我不知道是什么让我去检查async functions的文档，但是显然可以应用于它的选项并不是要与@ oblador / react-native-vector-icons配合使用，因此与@ expo / vector-icons ...

对于对带有expo / vector-icons的跨平台图标感兴趣的人，您可以参考https://www.npmjs.com/package/react-native-ionicons

提供的问题和解决方案