【问题标题】: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 了吗? 要检查这一点您可以使用 Nativebaseexamples 的编辑器 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你可以简单地使用它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-08-24
    • 1970-01-01
    • 2019-02-07
    • 2011-08-25
    • 1970-01-01
    • 2018-11-22
    • 1970-01-01
    相关资源
    最近更新 更多