如何在 React Native 中显示图标？

Posted 2023-02-16

【中文标题】如何在 React Native 中显示图标？

【英文标题】：How to display an icon in React Native?

【发布时间】：2015-06-02 02:27:40

【问题描述】：

我需要一个删除按钮，并且想使用这个在 ios 中随处可见的垃圾桶图标。如何在 React Native 中显示这个系统范围的垃圾桶图标，而不是在 Image-View 中显示我自己的图标？

【问题讨论】：

建议将@Jonathan Lockley 的答案标记为正确。 @talpaz 的解决方案是在 react-native-vector-icons 出现之前编写的。

【参考方案1】：

您可以使用一个节点模块，它可以让您访问 Ion 和 FontAwesome 之类的字体图标，您可以在其中找到几乎任何您想要使用的图标。安装和使用 iOS 和 android 非常简单。 https://github.com/oblador/react-native-vector-icons

【讨论】：

这是正确的答案，但不幸的是它还不适用于 。 github.com/oblador/react-native-vector-icons/issues/101

@jewbix.cube：它适用于 RN 0.21+

@oblador 是的，你是绝对正确的，它现在与 RN 0.21+ 一起工作，你帮助我让它工作。应该重新审视这个问题，以便将 Jonathan Lockely 的答案标记为最佳。

【参考方案2】：

这是一个很好的问题，但我想这是不可能的。

在 iOS SDK 中，显示标准图标的唯一方法是通过选择 UIBarButtonSystemItem 类型来创建特定类型的 UIBarButton，详细信息 here 但据我所知，React Native 库不会创建 UIBarButton，而是只有可点击的元素，如 TEXT 或 IMAGE 和 TEXT 的组合视图，包含在 TouchableHighlight 中，因此规范似乎没有暴露......

如果有人在 iOS SDK 中找到一种方法，无需使用私有 API，即可访问标准按钮图标中使用的 PNG，我认为该行为可以轻松添加到 IMAGE 类中。

斯特凡诺

【讨论】：

为什么不把<Image/> 和<Text/> 包裹在<TouchableHighlight/> 中呢？ iOS 图像在某处可用吗？