链接和使用第三方库

17 Mar 2025 | 阅读 2 分钟

第三方库提供了 React Native 功能中不可用的原生应用程序功能。如果我们参考 React Native 文档，会发现很多功能都不可用（例如地图）。因此，我们需要在我们的项目中添加第三方库。在本教程中，我们将学习如何在我们的应用程序中添加第三方库（添加第三方图标）。有不同的捆绑图标集可用。其中一些列在下面

AntDesign
Entypo
EvilIcons
Feather
FontAwesome
FontAwesome 5
Foundation
Ionicons
MaterialIcons
MaterialCommunityIcons
Octicons
Zocial
SimpleLineIcons

安装库

根据开发操作系统和目标操作系统，安装库的方法和命令有所不同。在本教程中，我们安装 Ionicons 库。要在 Windows 上安装 Ionicons 库，请运行命令：$ npm install react-native-vector-icons --save。

创建一个项目并运行 'npm install --save react-native-vector-icons'，例如 D:\ReactNative\navigationApp>npm install --save react-native-vector-icons

在 Android 上链接库

打开你的 android/settings.gradle 文件并添加以下代码。在这里，我们只添加 Ionicons 库。如果你想添加其他库，只需将它们添加到 include 标签中，并在 project 中提及它们在 android 文件夹中的路径和库，如下所示。

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

现在，在 android/app/build.gradle 中添加以下依赖项

早期，直到 2018 年，编译术语被用来代替实现。

在 android/app/src/main/java/com/{project_directory}/MainApplication.java 中

import com.oblador.vectoricons.VectorIconsPackage;
...
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new VectorIconsPackage()
    );
  }

要添加更多库，只需用逗号分隔它们并添加库包。以上步骤是在 Android 中添加原生库的常用方法。

现在，在 'android/app/build.gradle' 中添加以下依赖项

project.ext.vectoricons = [
    iconFontNames: ['Ionicons.ttf'] // Name of the font files you want to copy
]

React Native 链接第三方库示例

在本例中，我们将添加 Ionicons 库的垃圾桶图标。打开你的项目，并从 'react-native-vector-icons/Ionicons' 包中导入 Icon。在 ionicons.com 上搜索你要添加的图标（在我的例子中是 ios-trash）。

在 npm 文档中，你将找到 Icon 组件及其属性。

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity,Alert} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

type Props = {};
export default class App extends Component<Props> {
  deleteItem = ()=>{
    Alert.alert("delete icon pressed")
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>Adding Ionicons library</Text>
        <TouchableOpacity style={styles.touchableStyle} onPress= {this.deleteItem} >
            <Icon size={30} name="ios-trash" color="red"/>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
   textStyle:{
      fontSize:25,
      marginTop: 30,
      textAlign: 'center',
   },
   touchableStyle:{
     marginTop: 80,
     justifyContent: 'center',
     alignItems: "flex-end",
     marginRight: 50,
   }
});

输出