Aula 10 - Navegação entre telas com React Native

Поделиться
HTML-код
  • Опубликовано: 3 дек 2024

Комментарии • 59

  • @leochaves401
    @leochaves401 2 года назад +4

    Voce explica muito bem!!! continue assim, didático e simples

  • @tvbelmonteoficial
    @tvbelmonteoficial 3 года назад +2

    Mais um inscrito! Tem muitas explicações que dá cansaço na gente. Mas a sua fez o tempo passar voando! Obrigado!

  • @JulioCesarSounds
    @JulioCesarSounds 3 года назад +1

    Muito bom mesmo. Primeiro canal que a aplicação realmente funciona. Muito obrigado

    • @leguarino
      @leguarino  3 года назад

      Aeeeeeeeeeeeeeeeeeeee!!!

  • @italoalmeida9389
    @italoalmeida9389 3 года назад +1

    muito massa o jeito descontraído que você explica!

  • @J4ck3s
    @J4ck3s 2 года назад +1

    Caramba Leandro, sua vaibe pra ensinar é muito boa, estou aprendendo React Native e não consegui parar de assistir seus vídeos depois que achei aqui no YT. Está de Parabens!! Mais um inscrito fiel aqui pro canal.
    Compraria um curso seu sem dúvida.

  • @gambiahero
    @gambiahero 3 года назад +1

    muito bom cara, mais um inscrito. to requentando o meu react native com vc. agora to tentando usar o expo pra um projeto e você tá me ajudando bastante! parabéns traga mais videos de react native! sua didática é otima!

    • @leguarino
      @leguarino  3 года назад

      Obrigado. Fico feliz em ajudar.

  • @salvadorjesus6881
    @salvadorjesus6881 4 года назад +1

    Exelente ,exepcioal, extraordinário ,como definir essas aulas?
    Cara parabéns, um espetáculo de ensino.
    Deus poça te iluminar cada vez mais!

  • @saiaxadrez5334
    @saiaxadrez5334 3 года назад +1

    Muito bom!!!

  • @JoaoPedro-bw7wz
    @JoaoPedro-bw7wz 3 года назад +1

    Quando fiz o comando "npm install @react-navigation/stack --save" dava problema sempre falando que esse link não existia, fiz o comando sem o --save e funcionou! dei Ctrl + S pra salvar e rodando bem até agora
    -quando procurei o auto import com ctrl+espaço, n encontrei então tive que importar escrevendo diretamente lá no começo do arquivo
    [edit = notei que meu arquivo login estava com a primeira letra em minúsculo hehe, atualizei o nome e resolvido, apareceu o autoimport]

  • @infodevbrasil
    @infodevbrasil 3 года назад +1

    boa noite, otimo trabalho, bom qual a melhor forma de se fazer uma tela de splash screen?

    • @leguarino
      @leguarino  3 года назад

      Vc pode criar uma tela inicial no seu StackNavigator. Vou mostrar no curso mais pra frente

  • @fernandolima1051
    @fernandolima1051 Год назад +1

    Probleminha, o meu deu
    "The action "reset" with "index:0; routes:name:Home" was not handled by navigator
    This is a development-only warning and wont be shown in production....

    • @leguarino
      @leguarino  Год назад

      Verifique se os nomes das rotas estão OK. Se o nome Home existe nas rotas e está escritos dessa forma.

    • @fernandolima1051
      @fernandolima1051 Год назад

      @@leguarino funcionou... vlw cara.. aliaz, bom tutorial 😄

  • @mauricioperinbecker4003
    @mauricioperinbecker4003 2 года назад +1

    Preciso de uma ajuda, invés de usar export defaut function Login(navigation) estou usando export default class Login extends Component, como pego o navigation desse jeito ?

    • @leguarino
      @leguarino  2 года назад +1

      Com class components, tente isto:
      this.props.navigation.navigate('nextScreen')

    • @mauricioperinbecker4003
      @mauricioperinbecker4003 2 года назад +1

      @@leguarino Muito Obrigado, me ajudou muito

  • @raphaelgomescamara1275
    @raphaelgomescamara1275 2 года назад +1

    Olá boa noite, você sabe como eu faço para colocar algum dado do usuário de uma API (tipo o nome), como o título de cabeçalho de uma tela? Fiz minha API usando o Nest js baseado nas suas videoaulas.

    • @leguarino
      @leguarino  2 года назад

      A resposta não é tão simples, depende de como vc está fazendo as coisas.
      Se vc tiver um código que monta um cabeçalho customizado, vc pode usar o useEffect para chamar a API ou pegar os dados do usuário com useContext.

    • @raphaelgomescamara1275
      @raphaelgomescamara1275 2 года назад

      @@leguarino Eu to fazendo basicamente da mesma forma que você fez.

  • @andersonfelipepereiravieir4140
    @andersonfelipepereiravieir4140 3 года назад +1

    Se eu quiser criar um menu horizontal por exemplo com as abas de Home, Sobre e contato, mas ao invés de clicar nas abas pra redirecionar eu arrastasse a tela pro lado e já iria para o próximo, como se fosse um slide, eu usaria o Navigator pra isso?

    • @leguarino
      @leguarino  3 года назад +1

      Isso, só que é o Drawer Navigator: reactnavigation.org/docs/drawer-based-navigation/

    • @andersonfelipepereiravieir4140
      @andersonfelipepereiravieir4140 3 года назад +1

      @@leguarino aeeee, da hora... vou dar uma estudada nesse cara também.

    • @andersonfelipepereiravieir4140
      @andersonfelipepereiravieir4140 3 года назад +1

      @@leguarino eu tava olhando esse cara e vi que ele funciona como uma gaveta. Minha intenção é rolar de uma página pra outra sem a intenção de fechar uma gaveta. Seria esse cara mesmo ou vou ter que usar outro componente?

    • @leguarino
      @leguarino  3 года назад

      @@andersonfelipepereiravieir4140 acho que é isso que vc quer: www.npmjs.com/package/react-native-swipe-gestures

  • @dannyydanny7145
    @dannyydanny7145 2 года назад +1

    Como dividir a tela em 2 cores? Estou precisando muito

    • @leguarino
      @leguarino  2 года назад

      Dividir o que exatamente?

  • @Nieverton69
    @Nieverton69 4 года назад +1

    bem que poderia deixar os links dos sites usados no vídeo na descrição né

  • @joseleandrodemelosousa5554
    @joseleandrodemelosousa5554 2 года назад +1

    mano oi, gostei muito do vídeo. Mas fui tentar fazer e to dando de cara com o erro " undefined is not an object (evaluating'navigation.navigate') " pode me dar uma ajuda??

    • @leguarino
      @leguarino  2 года назад

      Verifique se está chegando a variável navigation no início da função, assim function NomeDaFuncao({navigation}).
      Sugiro também comparar seu código com o código disponível no GitHub. Link na descrição do vídeo

  • @JoaoPedro-bw7wz
    @JoaoPedro-bw7wz 3 года назад +1

    expo start parou de funcionar :/
    "Unable to find expo in this project - have you run yarn / npm install yet?"

    • @leguarino
      @leguarino  3 года назад

      Estava funcionando?

    • @leguarino
      @leguarino  3 года назад

      Verifique se vc está na pasta do projeto para executar "expo start".

    • @JoaoPedro-bw7wz
      @JoaoPedro-bw7wz 3 года назад +1

      @@leguarino estava sim, se quiser posso te enviar uma cópia via email ou posto no github p vc ver

    • @leguarino
      @leguarino  3 года назад

      @@JoaoPedro-bw7wz Então verifique se, na linha de comando, vc está no diretório raiz do projeto. Rode "npm install". Se não funcionar, é porque vc está executando o comando fora do diretório do projeto.

    • @JoaoPedro-bw7wz
      @JoaoPedro-bw7wz 3 года назад +1

      @@leguarino o npm install funciona, adicionou um package-lock.json ao projeto, mas logo após isso quando testo o expo start, aparece o mesmo problema

  • @Gustavo-lk8uf
    @Gustavo-lk8uf 2 года назад +1

    Tem como tirar esse name do stack screen?

    • @leguarino
      @leguarino  2 года назад

      Na documentação, há uma propriedade headerShown. reactnavigation.org/docs/stack-navigator/

    • @Gustavo-lk8uf
      @Gustavo-lk8uf 2 года назад

      @@leguarino muito obrigado👊

  • @junioranheu
    @junioranheu 4 года назад +1

    Com 1 minuto de vídeo já tava dando zika pra instalar o "@react-navigation/native@5.8.10", mas daí rodei aqui o install dos avisos que tava dando (npm install react@16.13.1, npm install bufferutil@4.0.1, npm install utf-8-validate@^5.0.2)
    Edit: Pô, nada a ver. Era erro meu mesmo, tava moscando... não tava instalando "@react-navigation/native@5.8.10" dentro da pasta certa do projeto kkkkkkkk

    • @leguarino
      @leguarino  4 года назад +1

      Blz, Júnior. Se houver BO, escreve aí.

    • @junioranheu
      @junioranheu 4 года назад +1

      @@leguarino Ao rodar o expo start aos 14:22 aqui, além do caminho do MainStyle, me deu o erro "Failed building JavaScript bundle.
      " porque faltavam algumas dependências. Fui lendo quais eram e as rodei:
      npm install react-native-gesture-handler
      npm install react-native-screens
      npm install @react-native-community/masked-view
      Depois disso, funfou normal
      Vou continuar vendo o vídeo e vou atualizando o comentário

    • @leguarino
      @leguarino  4 года назад

      @@junioranheu Então acho que você pulou a parte do expo install que instala essas dependências, não pulou?

    • @junioranheu
      @junioranheu 4 года назад +1

      VÍDEO AULA TOPPPPPPPPPPP DO GUARININHO, funfou tudo da hora, bora pra próxima

  • @romulomarques1000
    @romulomarques1000 2 года назад +1

    PROFESSOR NA HORA DE RODAR O EXPO NAO RODA PORQUE ESTA DIZENDO QUE "@react-native-masked-view/masked-view" is added as a dependency in your project's package.json but it doesn't seem to be installed. Please run "yarn" or "npm install" to fix this issue.
    O QUE PARECE É QUE O EXPO NAO ESTA MAIS SUPORTANDO "React Native MaskedView" A MENOS QUE EJETE React Native MaskedView
    GOSTARIA DE SABER COMO EJETAR React Native MaskedView OU OUTRA MANEIRA DE CONSERTAR ESSE PROBLEMA.
    ESTOU AGUARDANDO SUA RESPOSTA PARA MIM CONTINUAR A AULA. POR FAVOR ME AJUDE COM ISSO

    • @leguarino
      @leguarino  2 года назад

      você rodou "yarn" ou "npm install" já?

    • @romulomarques1000
      @romulomarques1000 2 года назад +1

      @@leguarino ja rodei os dois foi a primeira coisa que eu tentei. o problema é que o expo nao suporta mais "React Native MaskedView". Gostaria de desinstalar isso

    • @leguarino
      @leguarino  2 года назад

      @@romulomarques1000 vc pode rodar yarn remove @react-native-masked-view/masked-view e seguir no projeto

    • @romulomarques1000
      @romulomarques1000 2 года назад

      @@leguarino rodei yarn remove @react-native-masked-view/masked-view, nao reconheceu. ai rodei npm remove @react-native-masked-view/masked-view. mas continua o mesmo erro e nao removeu o masked view

    • @romulomarques1000
      @romulomarques1000 2 года назад

      PROFESSOR: consegui resolver o problema e passar dessa aula. mas tive que começar outro projeto do "zero" e quando chegou nessa aula nao instalei o "@react-native-masked-view/masked-view" ja que ele esta ultrapassado. mas tambem tive que atualizar o expo nessa aula
      BRIGADO PELA ATENÇAO