Navegando entre telas e passando parâmetros

Todo componente registrado como uma tela em um navegador do React Navigation recebe automaticamente a propriedade navigation. Esse objeto fornece métodos para passar de uma tela para outra, voltar e gerenciar a pilha de navegação. Você também pode acessá-lo em componentes aninhados usando o gancho useNavigation.

Chame navigation.navigate('ScreenName') para passar para outra tela. Se a tela já estiver na pilha e você navegar até ela novamente, o React Navigation irá para a instância existente em vez de adicionar uma duplicata. Use navigation.push('ScreenName') para sempre adicionar uma nova instância.

Chame navigation.goBack() para retirar a tela atual da pilha e voltar à anterior. No iOS, o gesto de deslizar para voltar vem ativado por padrão. No Android, o botão Voltar físico chama goBack automaticamente. Use navigation.popToTop() para voltar diretamente à primeira tela.

Passe um segundo argumento para navigation.navigate a fim de enviar parâmetros à tela de destino. O objeto de parâmetros pode conter qualquer dado serializável — IDs, textos e valores booleanos. Evite passar objetos complexos não serializáveis, como instâncias de classes ou funções.

A tela de destino recebe uma propriedade route junto com a propriedade navigation. Acesse os parâmetros enviados por meio de route.params. Sempre forneça valores padrão caso uma tela seja aberta sem parâmetros, por exemplo, quando for a tela inicial.

Defina initialParams em um Stack.Screen para fornecer valores de parâmetros padrão. Esses valores padrão são combinados com quaisquer parâmetros enviados durante a execução, para que a tela sempre tenha um conjunto completo de valores com os quais trabalhar, mesmo quando for aberta como a rota inicial.

Uma tela pode atualizar seus próprios parâmetros usando navigation.setParams. Isso é útil quando uma ação na tela atual, como editar um campo de formulário, deve ser refletida no título do cabeçalho de navegação. A atualização dos parâmetros aciona uma nova renderização da tela.

Componentes filhos profundos que não são telas registradas não recebem automaticamente a propriedade navigation. Use o gancho useNavigation() do React Navigation para acessar o objeto de navegação em qualquer lugar dentro da árvore de navegadores, sem precisar repassar propriedades por vários níveis.

Da mesma forma, use o gancho useRoute() para acessar route.params em um componente que não seja uma tela. Isso é útil quando você tem um componente profundamente aninhado que precisa ler os parâmetros da tela atual sem repassar a propriedade route por todos os níveis.

Você pode definir dinamicamente o título do cabeçalho de navegação com base nos parâmetros da rota, passando uma função para a propriedade options. A função recebe o objeto route, permitindo usar os valores dos parâmetros como título da tela sem precisar de um estado adicional.

Para enviar dados de uma tela filha de volta à tela pai, use navigation.navigate com o nome da tela pai e inclua os dados de retorno como parâmetros. A tela pai receberá os parâmetros atualizados. Como alternativa, passe uma função de retorno de chamada como parâmetro para a tela filha e chame-a antes de voltar.

Nesta lição, você aprendeu a: usar navigation.navigate para passar para outra tela, passar parâmetros como segundo argumento de navigate e ler parâmetros com route.params na tela de destino. A seguir, exploraremos o navegador de abas inferiores.