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.
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" />
Você não precisa de mais para instalar reat-native globalmente, você pode usar:
Npx reat-native link
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.
Existem 2 opções disponíveis para configurar o react-native-vector-icons no seu projecto:
- com ligação (reat-native
- 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