Nativebase：如何渲染图标？答案

【问题标题】：Nativebase: How to render an Icon?Nativebase：如何渲染图标？
【发布时间】：2021-12-21 09:01:15
【问题描述】：

documentation 表示“使用第三方图标库（例如 @expo/vector-icons ），带有 as prop。”

我真的不知道这意味着什么，但假设我想渲染 Ionicon 的主页图标。

<Icon as="Ionicons" name="home" size={size} color={color} />

这只是呈现问号。那么知道如何使用它吗？

【问题讨论】：

这些答案解决了你的问题吗？

标签： react-native native-base

【解决方案1】：

您在字符串中提供离子，而它是一个组件。正确的做法是：

<Icon as={Ionicons} name="home" size={size} color={color} />

【讨论】：

【解决方案2】：

记住import ;-) 你仔细阅读documentation 了吗？要检查这一点您可以使用 Nativebase 中 examples 的编辑器 documentation.

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

export default class IconExample extends React.Component {
  render() {
    return <Ionicons name="home" size={32} color="green" />;
  }
}

【讨论】：

所以nativebase真的不包含任何图标库，需要单独安装吗？
正如我们在 Nativebase 文档中看到的：它们“提供了一组常用的界面图标。因此您可以直接在项目中使用它们。我们所有的图标都是使用 NativeBase 的 createIcon 函数创建的”。当谈到“Ionicons”这个库是expo包的一部分，所以如果你使用expo你可以简单地使用它。