react-native - native 库 : How to render an Icon?

Question

documentation说“使用第三方图标库(例如@expo/vector-icons)作为 Prop 。”

我真的不知道那是什么意思，但假设我想渲染 Ionicon 的主页图标。

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

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

Answer 1

如果您正在使用 expo:

yarn add @expo/vector-icons

在 jsx/tsx 中使用图标:

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

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

如果您不使用 expo，您可以使用 react-native-vector-icons 代替:

yarn add react-native-vector-icons

不要忘记运行 pod update 并添加 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 到 android/app/build.gradle

在 jsx/tsx 中使用图标:

import Ionicons from 'react-native-vector-icons/Ionicons'

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