1
resposta

React Native Navigation com React-Native 0.58

Estou utilizando meu android via USB para acompanhar o curso. E a versão do react-native é "^0.58.5". No início do curso já teve algumas leves mudanças, mas deu pra resolver, porém nessa parte do react-native-navigation, a documentação está muito diferente do que está mostrando no vídeo. Mesmo assim tentei seguir os passos que está na documentação atual, e não deu certo. Tem coisas na documentação que nem existem no meu código como por exemplo:

compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 }

E quando algumas coisas que na documentação está com uma versão inferior e ela manda modificar para uma versão maior:

  • buildToolsVersion = "26.0.3"
  • buildToolsVersion = "27.0.3"

Sendo que no meu código a versão já é:

buildToolsVersion = "28.0.2"

Tem muitas modificações pra fazer, que não estão muito claras, além de ter que instalar mais versões do SDK.

Existe algum lugar que ensina a instalar isso nessa versão atual?

E pior que nem da pra ficar cobrando muito do curso porque esses frameworks se atualizam a cada segundo :/

1 resposta

Eu tenho um exemplo que talvez ajude.

No terminal, criar o projeto com react-native init (nome_do_projeto)

Entrar dentro da pasta do projeto e executar:

npm install react-navigation
npm install react-native-gesture-handler
react-native link

Aqui tem um exemplo de um arquivo de rotas:

import { createStackNavigator, createAppContainer } from 'react-navigation';
import { colors } from './styles';
import Main from './pages/main';
import Favorites from './pages/favorites';

const Rotas = createStackNavigator(
  {
    Main: { screen: Main },
    Favorites: { screen: Favorites },
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: colors.primaryDark,
      },
      headerTintColor: colors.white,
      headerBackTitle: null,
    },
  },
);

const Routes = createAppContainer(Rotas);

export default Routes;

Aqui tem um exemplo da index (desconsidere a parte do redux)

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Routes from './routes';

const App = () => (
  <Provider store={store}>
    <Routes />
  </Provider>
);
export default App;

Aqui tem um tutorial recente:

https://reactnativecode.com/getting-started-with-react-navigation/

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software