安卓和iOS的矢量图标

Question

在 https://www.npmjs.com/package/react-native-ionicons 中，我们有两种加载iOS和Android图标的方法。我用 v9.0.0 的 @expo/矢量图标尝试了这两种方法。

我用这个语句导入离子图标：

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

1. 从名称中删除 ios/md

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

我收到以下错误，其他图标名称也会发生这种情况：

警告：失败的道具

类型：值闭环的道具名称无效 提供给 Icon，预计其中之一 ...

2. 如果我传递ios/android属性，则图标不会显示，并且没有收到警告，例如：

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

我目前的修复基于如何在反应本机中创建跨平台图标？。我使用：

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

有没有更简单的方法？

谢谢！

Answer 1

因此

，警告表明您提供的名称与 Ionicon 的图标不匹配。解决它的两种方法是

1. 将正确的名称传递给组件。要查找所有名称，请访问此处
2. 从"@expo/矢量图标/离子图标"导入离子图标。

希望对您有所帮助！

Answer 2

看来这是我这边的疏忽。@expo/矢量图标的自述文件指出：

这个库是一个兼容层 @oblador/反应原生矢量图标以与世博会资产系统配合使用。

我不知道是什么让我检查文档以获取 https://www.npmjs.com/package/react-native-ionicons 但显然可以应用于它的选项并不意味着与 @oblador/react-native-vector-icon 一起使用，因此@expo/vector-icons......

对于任何对带有expo/vector图标的跨平台图标感兴趣的人，您可以参考如何在反应原生中创建跨平台图标中提供的问题和解决方案？