1
resposta

Erro com o React-Native-Navigation

Olá, estou seguindo as aulas, mas na parte da instalação e configuração do React-Native_Navigation tive problemas, tentei efetuar o processo 3x, mas tive problemas, pois de acordo com a aula a documentação está totalmente diferente... Tentei fazer novamente do zero seguindo a documentação, consegui fazer as configurações e compilou o projeto na IDE do Android Studio, mas depois quando vou tentar iniciar o projeto usando o "react-native run-android" ele da erro, coloquei 3 Print.

Print 01: https://uploaddeimagens.com.br/imagens/print_1-png-bcff00c6-7dd1-4adf-ab13-9fe2209a2503

Print 02: https://uploaddeimagens.com.br/imagens/print_2-png-a9d8005f-1e41-4746-a474-4999d1c045df

Print 03: https://uploaddeimagens.com.br/imagens/print_3-png-7e216a8e-2f12-4676-b4bc-bac05606a228

1 resposta

Supondo que o SDK do Android este atualizado, e o emulador esteja aberto, um passo a passo resumido para criar do zero um projeto com o navigation novo (versão 3) seria o seguinte:

react-native init nome_do_meu_projeto
cd nome_do_meu_projeto
npm install react-navigation
npm install react-native-gesture-handler
react-native link
react-native run-android

A forma de criar as rotas é um pouco diferente, as rotas precisam estar dentro de um objeto "container". Aqui segue um exemplo que eu fiz com base na documentação atual:

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
    Details: DetailsScreen
  }
});

export default createAppContainer(AppNavigator);

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