Criando uma nova aplicação, tive a necessidade de passar um determinado parâmetro que estava em um input
, de modo que em uma tela seguinte o título seria o que foi digitado nele. Utilizei um método aprendido recentemente que pode auxiliar os que desejam saber como fazer isso, neste artigo explicarei como executei a resolução.
O Problema -
Como explicado antes, eu quero passar um parâmetro dinâmico escrito em um input e substituir por um título em outra página. Mas como fazer isso? Meu código estava do seguinte modo:
(...)
export function NewGroup(){
const navigation = useNavigation();
function handleNew(){
navigation.navigate('players',{"teste"});
}
return(
<Container>
<Header showBackButton/>
<ContentTwo>
<Icon/>
<Highlight
title="Nova Turma"
subtitle="Crie turmas e adicione pessoas"
/>
<Input
placeholder="Nome da turma..."
placeholderTextColor= "#7C7C8A"
/>
</ContentTwo>
<Button
title="Criar"
onPress={handleNew}
/>
</Container>
);
}
Neste código, temos a base de um componente que tem um input
e button
. Neste botão,temos uma função chamada handleNew
que quando clicada executa a navegação para outra tela com nome player
.
A Solução -
Para que no clique do botão eu não só passe para a próxima página, como também buscar o valor descrito dentro do input
, é necessário fazer uma manipulação de estado. Com isso, utilizo o hookuseState
e crio uma constante que irá pegar o parâmetro escrito. O código ficará do seguinte modo:
export function NewGroup(){
const [group, setGroup] = useState('');
const navigation = useNavigation();
function handleNew(){
navigation.navigate('players',{ group });
}
return(
<Container>
<Header showBackButton/>
<ContentTwo>
<Icon/>
<Highlight
title="Nova Turma"
subtitle="Crie turmas e adicione pessoas"
/>
<Input
placeholder="Nome da turma..."
placeholderTextColor= "#7C7C8A"
onChangeText={setGroup}
/>
</ContentTwo>
<Button
title="Criar"
onPress={handleNew}
/>
</Container>
);
}
Neste código, criamos uma const que guardará group
e setGroup
. Ao adicionar no input
o setGroup
receberá tudo que foi escrito no group
. E adicionamos na navegação da página o group
que irá ser carregado para a tela seguinte.
Recebendo o parâmetro de outra tela -
Para receber o que foi escrito no input da tela anterior, fazemos o seguinte:
type RouteParams = {
group: string;
}
export function Players (){
const [team, setTeam] = useState('Time A');
const [players, setPlayers] = useState([]);
const route = useRoute();
const { group } = route.params as RouteParams;
return(
<Container>
<Header showBackButton/>
<ContentOne>
<Highlight
title={group}
subtitle="Adicione e separe os times"
/>
</ContentOne>
Importamos o useRoute que é um hook que acessa propriedades de outras telas, e nela criamos um hook com nome route
que irá receber esse hook. Após isso, nós desestruturamos dentro de uma const o parâmetro da tela anterior, e nele será recebido: route.params as RouteParams;
esse caminho se deve a tipagem necessária para que o typescript pudesse reconhecer que parâmetros ele recebe, que é uma string. Logo após isso, escolhemos onde será trazido o parâmetro que escolhi ser o título da página.
Vejamos o resultado:
Ao passar o parâmetro digitado, o título da tela seguinte irá mudar do seguinte modo:
Esse foi o método que utilizei para resolver esse problema, espero que esse artigo tenha o ajudado. Obrigado por ler até aqui!!!
Top comments (1)
Costumo utilizar da forma abaixo, assim consigo pegar outros elementos da rota (além dos parâmetros) e deixar uma interface contendo todas as rotas (passando também para outros pontos, como o navigation)