4

我正在尝试在材料社区图标中使用店面图标。但是我收到一个错误，它不显示图标。这是我的代码：

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：我认为这只是一些我无法访问的材料社区图标，包括“店面大纲”和“店面”。也许它们已被弃用但在您搜索商店时仍然存在？感谢大家的帮助，但我将只为我的情况使用一个替代图标，因为我已经浏览了矢量图标文档中的所有内容。

4

4 回答 4

8

请按照以下步骤操作 -

步骤 - 1：导入图标系列

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

步骤 - 2：渲染组件

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

于 2020-07-08T04:43:31.720 回答
2

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

npx 反应本机链接

https://reactnative.dev/docs/libraries

于 2020-07-08T07:18:43.310 回答
2

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

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

查看“入门”以获取有关使用材料社区图标的更多信息。

于 2020-07-09T03:17:36.607 回答
1

有 2 个选项可用于将 react-native-vector-icons 配置到您的项目：

  1. 使用链接（反应原生 < 0.60
  2. 没有链接（react-native > 0.60）

如果您想使用链接选项，您需要先全局安装 react-native，为此您可以在终端上运行以下命令

npm install -g react-native-cli

此命令将帮助您将 react-native 全局安装到您的机器上，然后在您能够将 react-native-vector-icons 库链接到您的项目以及任何其他库之后，

但是我不建议采用这种方式，因为 react-native > 0.60 自己管理链接过程，所以你不需要自己链接库，

只需浏览 react-native-vector-icons 文档，无需链接方式即可。 反应本机矢量图标

于 2020-07-08T04:17:07.697 回答