如何在同一组件内的不同目录中使用 React Native 矢量图标？答案

【问题标题】：How I can use React Native vector icons from different directory inside same component?如何在同一组件内的不同目录中使用 React Native 矢量图标？
【发布时间】：2023-01-04 12:17:37
【问题描述】：

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

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

我想在同一组件中同时使用来自“react-native-vector-icons/Feather”和“react-native-vector-icons/Ionicons”的图标。

但是导入两个图标给出语法错误。

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
     {/* message-circle is from 'react-native-vector-icons/Feather' */}
      Icon name="message-circle" size={20} color='white' />
      {/* md-caret-down is from 'react-native-vector-icons/Ionicons' */}
      {/* Icon name="message-circle" size={20} color='white' /> */}
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

【问题讨论】：

标签： reactjs react-native react-native-vector-icons feather

【解决方案1】：

进口反应本机矢量图标使用（npm i react-native-vector-icons）。

然后使用来自不同包的矢量图标到您当前的组件，如 View、SafeAreaView、ScrollView、....等，如下面的代码。

您可以像这种方法一样使用矢量图标中的任何包。

import {Ionicons,MaterialCommunityIcons,FontAwesome5} from '@expo/vector-icons';



export default function App() {
  return (
    <SafeAreaView style={styles.container}>
              <Ionicons
                name="information-circle"
                size={24}
                color={"#3280F0"}
                />   
      {/* information-circle is from 'expo/vector-icons/Ionicons' */}
      </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
                 flex: 1,
                 backgroundColor: '#fff',
  },

【讨论】：

谢谢你。有效。 npm install react-native-vector-icons --save这个命令够了吗？
npm link react-native-vector-icons 安装时是否也需要这个命令？

【解决方案2】：

您可以通过如下别名使用同名模块导入。

import {Icon as FeatherIcon} from 'react-native-vector-icons/Feather';

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

如需更多参考，您可以参考medium.com上的文档

对于别名，您必须使用唯一名称。像

import {Something as SomethingNewName} from .....

【讨论】：