如何在React Native中使用不同的图标库？

Question

大家下午好。

我在代码的开头指定了确切的库

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

我有一个关于如何一起使用不同的矢量库的问题。例如>>

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;

      if (route.name === 'Dashboard') {
        iconName = 'dashboard';
      } else if (route.name === 'Trades') {
        iconName = 'compare-arrows';
      }

      // You can return any component that you like here!
      return <Ionicons name={iconName} size={size} color={color} />;
    },
  })}
>

正如您在这里看到的，对于Dashboard，我使用的是FontAwesome库中的iconName = 'dashboard';。

但是，如果我想从另一个库中为Trades添加图标，比如从AntDesign中添加图标，我应该怎么做？如何为每个元素指定不同的图标库？如果我想从另一个不同的库添加更多的图标？

简要介绍:如何添加多个图标库并一起使用其中的图标。

Answer 1

用我这里的一个要点

https://gist.github.com/saachitech/02633cb443e121b4a792c537cdedc385

你可以像这样使用它

Import Fonticon from “./fontIcon”;

<Fonticon type={“FontAwesome”} name={“some name”} size={10} color={“#FFF”} />

type可以是矢量图标库中的任何内容。