android 和 ios 的矢量图标答案

【问题标题】：Vector icons for android and iosandroid 和 ios 的矢量图标
【发布时间】：2019-06-15 19:18:01
【问题描述】：

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

我用这个语句导入 Ionicons：

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

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

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

警告：失败的道具类型：价值封闭圈的道具名称无效提供给 Icon，应为 ...

<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'}} />

有没有更简单的方法？

谢谢！

【问题讨论】：

如果你传递ios和android属性，你应该使用import Ionicons from 'react-native-ionicons'。你在做这个吗？
我正在使用 expo，所以我需要使用 import { Ionicons } from '@expo/vector-icons'; 来加载矢量图标库。我猜它的行为方式与 react-native-ionicons 不同？
react-native-ionicons 的文档说您应该使用颜色属性而不是样式设置颜色。
@YMami 如果你想使用ios和android属性，你需要使用react-native-ionicons，然后使用你给我们的链接中描述的包
@2pha 感谢您的评论，但这不是我的问题

【解决方案1】：

Soo，警告提示您提供的名称与 Ionicons 的图标不匹配。解决它的两种方法将是

希望对你有帮助！

【讨论】：

【解决方案2】：

这似乎是我一方的疏忽。 @expo/vector-icons 的自述文件指出：

这个库是一个兼容层 @oblador/react-native-vector-icons 与 Expo 资产系统一起工作。

我不知道是什么让我检查了 https://www.npmjs.com/package/react-native-ionicons 的文档，但显然可以应用于它的选项不适用于 @oblador/react-native-vector-icons 和 @expo/矢量图标...

对带有expo/vector-icons的跨平台图标感兴趣的朋友可以参考How can I create cross platform icon in react native?提供的问题和解决方案

【讨论】：