3
respostas

Não aparece "tabBarOptions"

Alguém poderia me ajudar, estou com um problema no projeto da aula da aula 04(Navegação) do Curso de React-native, não estou conseguindo encontrar o tabBarOptions, segui os passos da aula, mas não estou conseguindo progredir por conta desse problema. Quanto eu digito dentro da <Tab.Navigator> o comando 'tabBarOptions' não aparece nada, a quem puder ajudar, agradeço desde já!

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

import Servicos from './telas/Servicos';
import Carrinho from './telas/Carrinho';
import { cores } from './estilos';
const Tab = createBottomTabNavigator();

export default function Rotas(){
    return <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Serviços" component={Servicos}/>
            <Tab.Screen name="Carrinho" component={Carrinho}/>
        </Tab.Navigator>
    </NavigationContainer>
}
3 respostas

Olá Josias, tudo bem?

Provavelmente isso tem relação com a versão instalada do react navigation. Foi instalado nessas versões?

npm install @react-navigation/native@5.9.2
npm install @react-navigation/bottom-tabs@5.11.7

Se puder compartilhar o repositório do seu projeto pra eu testar e verificar já ajudaria bastante. Fico no aguardo!

Segue o repositório do projeto, André.

Eu lembro de ter utilizado exatamente esses comandos, pois peguei os comandos na página oficial, mas fico na dúvida se fiz certo.

https://github.com/JosiasBogea/gatito.git

Olá Josias, era o que eu suspeitava. Seguindo a página oficial realmente a versão do React Navigation está em uma versão superior ao usada no curso. E essa versão nova não tem mais a propriedade "tabBarOptions", ai teria que ver na documentação qual é a propriedade substituta. Mas minha recomendação é que você utilize a versão do curso, pra isso faça o seguinte:

  1. Delete a pasta node_modules do seu projeto

  2. Abra o seu package.json e substitua tudo que esta em "dependencies" para isso:

    "dependencies": {
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/native": "^5.9.2",
     "expo": "~40.0.0",
     "expo-status-bar": "~1.0.3",
     "intl": "^1.2.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-gesture-handler": "~1.8.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.0",
     "react-native-web": "~0.13.12"
    },
  3. Por fim rode npm install no seu projeto para ele baixar os pacotes na versão referente ao curso

Rode o projeto expo normalmente e agora verá que a opção "tabBarOptions" estará disponível para uso. Eu recomendo que faça esse passo a passo pois vai evitar conflito de versões.

Espero que isso te ajude. Qualquer coisa é só falar ;)