[Dúvida] Erro ao inserir o tabBarIcon | React Native: criando menu e navegando entre telas

2
respostas

Referente ao curso React Native: criando menu e navegando entre telas, no capítulo Correções de layout e atividade Adição dos ícones

por Pedro Henrique Alves de Fretas Amorim

| 11.8k xp | 3 posts

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ProdutorRotas from './ProdutorRotas';
import MelhoresProdutoresRotas from './MelhoresProdutoresRotas';

import Coracao from '../assets/coracao.svg';
import Home from '../assets/home.svg';

const Tab = createBottomTabNavigator();

export default function AppRotas() {
    return <NavigationContainer>
      <Tab.Navigator screenOptions={({ route }) => ({
          headerShown: false,
          tabBarIcon: ({ color }) => {
            let Icon = Home;

            if (route.name === 'Melhores Produtores') {
              Icon = Coracao;
            }

            return <Icon color={color} />
          },
          tabBarActiveTintColor: '#2A9F85',
          tabBarInactiveTintColor: '#C7C7C7',
        })}>
        <Tab.Screen name='Home' component={ProdutorRotas} />
        <Tab.Screen name='Melhores Produtores' component={MelhoresProdutoresRotas} />
      </Tab.Navigator>
    </NavigationContainer>
}

2 respostas

por Pedro Henrique Alves de Fretas Amorim

| 11.8k xp | 3 posts

12/11/2023

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

{
  "name": "navegacao",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
    "react-native-svg": "^13.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-native-svg-transformer": "^1.1.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

por Estudante

| 569.5k xp | 1338 posts

13/11/2023

O código que você forneceu parece estar correto na manipulação do ícone da barra de navegação. No entanto, alguns pontos podem ser verificados ou ajustados para garantir que tudo funcione corretamente.

Importação de Componentes SVG: Certifique-se de que as importações dos componentes SVG (Coracao e Home) estão corretas. Certifique-se de que esses componentes estejam sendo importados corretamente. Por exemplo, você deve importar o componente SVG usando algo como import Home from '../assets/home.svg';.
Reconhecimento de Ícones pelo React Navigation: Certifique-se de que os componentes SVG estão sendo reconhecidos corretamente pelo React Navigation. Às vezes, é necessário usar um wrapper para garantir que o React Navigation possa processar corretamente os componentes SVG. Isso pode ser feito usando createBottomTabNavigator da seguinte maneira:
```
tabBarIcon: ({ color }) => {
  let IconComponent;

  if (route.name === 'Melhores Produtores') {
    IconComponent = Coracao;
  } else {
    IconComponent = Home;
  }

  return <IconComponent width={24} height={24} color={color} />;
}
```
Certifique-se de que os componentes SVG (Coracao e Home) aceitam propriedades como width, height, e color corretamente.
Verificação da Versão do React Navigation: Verifique se você está usando a versão correta do pacote @react-navigation/bottom-tabs que é compatível com a versão do @react-navigation/native. Isso pode ser feito verificando a compatibilidade na documentação do React Navigation.
Atualização de Dependências: As dependências do seu projeto podem ter atualizações disponíveis. Execute npm outdated para verificar se há pacotes desatualizados e, se necessário, atualize-os usando npm update.
Limpeza de Cache: Limpe o cache do projeto para garantir que não haja problemas com versões antigas ou cache incorreto. Você pode fazer isso executando npm cache clean e watchman watch-del-all (para limpar o cache do Watchman).

Certifique-se de verificar esses pontos para garantir que o código esteja correto e que não haja problemas com as dependências ou importações de componentes. Se o problema persistir, tente fornecer mais informações sobre a mensagem de erro específica ou comportamento indesejado para que eu possa ajudar melhor.