您可能已经在 SVG 上建立了自己的,您将其加载到组件上,使用 Icomoon创建了自己的图标库,或者使用了 Bootstrap 等已知图标库。
但也许你想使用平台特定的本地图标,所以如果你在 Android 上运行你的应用程序,你会看到材料设计图标和iOS图标在其平台上。
好消息! 有一个简单的方法来实现这一点,使用 react-native-vector-icons 。
创建一个平台特定的图标组件
让我们先安装react-native-vector 图标,然后使用react-native 链接自动配置本地项目:
1$ npm install react-native-vector-icons --save
2$ react-native link
<$>[警告] 请记住,如果您使用 create-react-native-app创建了应用程序,则需要将其排除,因为我们正在使用原生依赖性。
react-native-vector-icons是一组图标库,包括Entypo,FontAwesome等。
酷的一点是,它还包括Ionicons,一个伟大的图标集,实现了材料设计和iOS设计。
它有自己的命名公约,使用ios-和md-前缀来指定给定的图标的平台。
例如,如果我们想使用添加图标的 iOS 版本,我们可以导入图标组件并设置相应的名称:
1import Icon from "react-native-vector-icons/Ionicons";
2
3// ...
4<Icon
5 name="ios-add"
6 color="#ccc"
7 size={25}
8/>
以下是技巧:我们可以使用 Ionicons命名公约自动创建平台特定的图标. 为此,我们可以使用 React Native 的 平台模块来检查我们正在瞄准哪个平台并添加相应的名称:
1import { Platform } from "react-native";
2import Icon from "react-native-vector-icons/Ionicons";
3
4// ...
5<Icon
6 name={Platform.OS === "ios" ? "ios-add" : "md-add"}
7 color="#ccc"
8 size={25}
9/>
更重要的是,我们可以通过创建我们自己的图标组件来使它更加可重复使用,这样您不必每次重复使用它:
1[label components/Icon.js]
2import React from "react";
3import { Platform } from "react-native";
4import Icon from "react-native-vector-icons/Ionicons";
5
6export default ({ name, ...props }) => (
7 <Icon
8 name={Platform.OS === "ios" ? `ios-${name}` : `md-${name}`}
9 {...props}
10 />
11);
我们正在从附件中取出名称并添加相应的前缀,以及传递其余的附件。
然后,使用它就像导入我们刚刚创建的图标组件一样简单,并使用图标的基本名称:
1import Icon from "./components/Icon";
2
3// ...
4<Icon
5 name="add"
6 color="#ccc"
7 size={25}
8/>
包装上
我们已经看到如何使用Ionicons图书馆的命名公约,其中包括反应原生矢量图标,以创建我们自己的图标组件,使其易于使用该平台的特定图标。
希望这对你的项目有帮助!