React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解

一、安装图标库

要使用免费的图标库，你可以使用 React Native Vector Icons 库。

首先，确保你已经安装了 react-native-vector-icons：

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

npm install --save-dev @types/react-native-vector-icons

执行完命令之后，如果模拟器是开启的，建议重启（我在实验的过程中没有重启，结果图标不显示，排查了很久）

注意：

React Native Vector Icons 库中的图标大部分是免费提供的，但也有一些特定的图标集需要购买许可证。React Native Vector Icons 提供了一系列常用的图标集，比如 Material Icons、FontAwesome 等，它们通常是免费的，可以随意使用。不过，某些专有的图标集可能需要支付费用或购买许可证。

在使用这些图标集时，请确保遵守相关的许可协议，以确保你的使用是合法的。

二、使用详解

查看图标库：https://github.com/oblador/react-native-vector-icons

点击不同图标库可查看图标详情，以Ionicons为例

代码引用并使用：

引用方式一：

import React from 'react';
import { View, Text, Image, TouchableOpacity, Linking } from 'react-native';

import Ionicons from 'react-native-vector-icons/Ionicons';//引入自定义图标库

const LoginPage = () => {


  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

      <View style={{ position: 'absolute', top: 0, left: 0, 
right: 0, padding: 10, flexDirection: 'row', alignItems: 'center' }}>

        <TouchableOpacity onPress={handleHomeNavigation}>
            <Ionicons name={'accessibility-outline'} size={30} color={'red'}></Ionicons>//使用图标库
        </TouchableOpacity>

      </View>
      
    </View>
  );
};

export default LoginPage;

引用方式二：

import React from 'react';
import { View, Text, Image, TouchableOpacity, Linking } from 'react-native';

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

const LoginPage = () => {


  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

      <View style={{ position: 'absolute', top: 0, left: 0, 
right: 0, padding: 10, flexDirection: 'row', alignItems: 'center' }}>

        <TouchableOpacity onPress={handleHomeNavigation}>
            <Icon name="accessibility-outline" size={30} color="red" />//使用图标库
        </TouchableOpacity>

      </View>
      
    </View>
  );
};

export default LoginPage;

Ionicons 和 Icon 之间的区别在于它们代表的具体图标集合和用法。

1. Ionicons: Ionicons 是一个开源的图标库，专门为 Ionic Framework 设计。Ionicons 包含了大量现代化的图标，适合在移动应用或 Web 应用中使用。它的图标设计简洁、清晰，适合用于各种按钮、菜单、和界面元素。

2. Icon: Icon 是一个更通用的术语，代表任何一种图标或图形符号。通常情况下，Icon 可以指代任何种类的图标，不一定局限于特定的图标库或设计风格。在不同的开发环境中，开发者可以使用不同的图标库或自定义图标来创建各种图标。

总的来说，Ionicons 是一个具体的图标库，适合于 Ionic Framework，而 Icon 是一个更广泛的概念，可以代表任何种类的图标。前者具有特定的用途和设计风格，后者则是一个更通用的术语。