Nativebase：如何渲染图标？

Posted 2023-02-16

【中文标题】Nativebase：如何渲染图标？

【英文标题】：Nativebase: How to render an Icon?

【发布时间】：2021-12-21 09:01:15

【问题描述】：

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

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

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

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

【问题讨论】：

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

【参考方案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你可以简单地使用它。