0

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

我使用以下语句导入 Ionicons：

import { Ionicons } from '@expo/vector-icons';
  1. 从名称中删除 ios/md
<Ionicons name="close-circle" size={25} style={{color: 'white'}} />

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

警告：失败的道具类型：提供给图标的值闭合圆圈的道具名称无效，应为...

  1. 如果我改为传递 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'}} />

有没有更简单的方法？

谢谢！

4

2 回答 2

0

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

  1. 将正确的名称传递给组件。要查找所有名称，请访问此处
  2. 从 '@expo/vector-icons/Ionicons' 导入离子。

希望能帮到你！

于 2019-06-16T04:59:25.810 回答
0

It appears that it was an oversight on my side. The README for @expo/vector-icons states:

This library is a compatibility layer around @oblador/react-native-vector-icons to work with the Expo asset system.

I don't know what got me to check the documentation for https://www.npmjs.com/package/react-native-ionicons but clearly the options that can be applied to it are not meant to work with @oblador/react-native-vector-icons and thus @expo/vector-icons...

For anyone interested in cross-platform icons with expo/vector-icons, you can refer to the question and solution provided from How can I create cross platform icon in react native?

于 2019-06-18T01:59:10.823 回答