反应原生图标 - Javascript

React Native应用程序使用的图标通常是通过React Native Icons库提供的。但是，在某些情况下，您可能希望使用基于纯JavaScript的原生图标，而不是使用Fonts或SVG文件。这是React Native提供的“原生模块”和“UI组件”的优秀用例之一。

准备工作

如果您要使用原生图标，那么您还需要安装一组React Native原生组件。这是通过使用以下命令来完成的：

npm install --save react-native-vector-icons
react-native link react-native-vector-icons

引用图标

要引用图标，您需要首先从react-native-vector-icons包中导入一个或多个图标库。您可以通过以下方法之一来导入：

import Icon from 'react-native-vector-icons/FontAwesome';

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

然后，在您的应用程序的任何组件中，您可以使用导入的图标库中提供的图标。

例如，以下代码将使用FontAwesome图标库中的rocket图标：

<Icon name="rocket" size={30} color="#900" />

DIY图标

有时，您可能还需要创建自己的自定义图标。您可以通过将图标库和SVG文件组合来实现。以下代码演示了如何使用react-native-svg-uri库来实现此目的：

import SvgUri from 'react-native-svg-uri';
import rocket from './rocket.svg'; // Your SVG file

<SvgUri
  width={50}
  height={50}
  source={rocket}
/>

结论

现在，您已经了解了如何使用React Native以及纯JavaScript创建基于原生的图标。这是很强大的功能，可帮助您在应用程序中创建更具个性化的UI。