如何将物质社区图标与react-native-vector-icons结合使用

Question

我正在尝试在材料社区图标中使用店面图标。然而，我得到了一个错误，它没有显示图标。这是我的代码：

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

import Products from "./src/components/Products";
import Cart from "./src/components/Cart";
import Account from "./src/components/Account";

const Tab = createMaterialBottomTabNavigator();

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Browse"
          activeColor="#f0edf6"
          inactiveColor="#A3A3A3"
          barStyle={{ backgroundColor: "#515151" }}
        >
          <Tab.Screen
            name="Browse"
            component={Products}
            options={{
              tabBarLabel: "Browse",
              tabBarIcon: ({ color }) => (
                <Icon name="storefront-outline" color={color} size={26} />
              ),
            }}
          />
          <Tab.Screen name="Cart" component={Cart} />
          <Tab.Screen name="My Account" component={Account} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
}

我已经安装了矢量图标库和Ionic的其他图标，例如工作。

编辑：

我认为我需要将react-native链接到react-native-vector-icons，但我得到了一个错误，显示为The term 'react-native' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

编辑2:我认为这只是一些我无法访问的物质社区图标，包括"storefront-outline“和"store-front”。也许它们已经被弃用了，但当你搜索store时它们仍然存在？感谢大家的帮助，但我将只使用我的情况下的替代图标，因为我已经通过了矢量图标文档中的所有词干。

Answer 1

请执行以下步骤：

第1步:导入图标族

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

第-2步:呈现组件

<MaterialCommunityIcons name="access-point" size={24} color="black" />

Answer 2

您不再需要在全局范围内安装react-native，您可以使用：

npx react-本机链接

https://reactnative.dev/docs/libraries

Answer 3

补充一句: react-native-paper也是一个设计的好地方。他们有关于在react中使用矢量图标的文档。

https://callstack.github.io/react-native-paper/icons.html

有关使用material-community图标的更多信息，请查看Getting Started下的。