Como usar ícones de comunidade material com reat-native-vector-icons

estou a tentar usar o ícone da frente da loja nos ícones da comunidade material. No entanto, eu recebo um erro e ele não mostra o ícone. Este é o meu código:

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>
    );
  }
}

instalei a biblioteca de ícones vetoriais e outros ícones do Ionic, por exemplo, o trabalho.

editar:

Acho que preciso de ligar o reat-native ao reat-native-vector-icons, mas tenho um erro a dizer: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.

Editar 2: Eu acho que é apenas alguns ícones Materiais da Comunidade que eu sou incapaz de acessar incluindo "storefront-outline"e" store-front". Talvez tenham sido depreciados, mas ainda existam quando procuras uma loja? Obrigado pela ajuda de todos, mas eu vou apenas usar um ícone alternativo para a minha situação como eu já passei por todas as hastes na documentação de ícones vetoriais.

Author: anonymous, 2020-07-07

4 answers

Siga os passos abaixo -

Passo-1: Importar a família de ícones

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

Passo-2: desenhar o componente

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

 3
Author: Rakesh Medpalli, 2020-07-08 04:43:31

Você não precisa de mais para instalar reat-native globalmente, você pode usar:

Npx reat-native link

Https://reactnative.dev / docs / bibliotecas

 2
Author: Aymen, 2020-07-08 07:18:43

Só para acrescentar: reat-native-paper é um bom lugar para o design, também. Eles têm documentações sobre o uso de ícones vetoriais em reat.

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

Veja em baixo para obter mais informações sobre a utilização de ícones de comunidade material.

 2
Author: Ian Lee, 2020-07-09 03:17:36

Existem 2 opções disponíveis para configurar o react-native-vector-icons no seu projecto:

  1. com ligação (reat-native
  2. Sem ligação (reat-native > 0, 60)

Se quiser ir com a opção de ligação, precisa de instalar o react-native globalmente em primeiro lugar, para que possa executar abaixo do comando para o seu terminal

npm install -g react-native-cli
Este comando ajudá-lo-á a instalar o reat-native globalmente na sua máquina, depois de poder ligar react-native-vector-icons library to your project as well any other library,

Mas eu não vou recomendar ir por este caminho, porque reat-native > 0.60 gerencia o processo de ligação por si só, então você não precisa ligar bibliotecas por si mesmo,

Basta passar com a documentação reat-native-vector-icons, e seguir sem ligar caminho. Reat-native-vector-icons

 1
Author: Pavan Tank, 2020-07-08 04:17:07