Reaccionar ficha de navegação

Taohidul Islam Blocked Desbloquear Seguir Seguindo 10 de janeiro

Às vezes, precisamos apenas conhecer os fundamentos de um tópico de interesse, mas não os detalhes ou a explicação. Aqui vamos falar sobre alguns pontos-chave da biblioteca de react-navigation . Detalhes serão encontrados aqui . (Estou escrevendo de acordo com a versão 3.x)

Instalação

npm install — save react-navigation (usando npm)

yarn add react-navigation (usando o fio)

Criação de navegador de pilha

createStackNavigator função createStackNavigator é usada para um navegador de pilha de criação. createStackNavigator aceita um objeto de configuração do roteador e (opcionalmente) um objeto de opções. createStackNavigator função createStackNavigator retorna um componente React. Portanto, podemos exportá-lo do App.js

Definir rota inicial

Podemos definir explicitamente a rota inicial usando initialRouteName no createStackNavigator , como:

Movendo-se entre telas

Vamos, definimos um navegador stack com duas rotas Home e Details . Podemos navegar para telas usando:

this.props.navigation.navigate("Home");

this.props.navigation.navigate("Details");

Ou,

this.props.navigation.push("Home");

this.props.navigation.push("Details");

Diferença entre navigate e push :

Vamos, estamos na tela Home e, em seguida, se chamamos this.props.navigation.navigate("Home") nada vai acontecer. navigate function significa "ir para a tela específica" e se já estamos nessa tela, então não faz sentido ir lá novamente (na maioria dos casos).

Agora vamos, nós realmente queremos adicionar outra tela Details . E queremos passar alguns dados exclusivos para cada rota. Para fazer isso, precisamos alterar a navigate para push . Isso nos permite expressar a intenção de adicionar outra rota, independentemente do histórico de navegação existente.

Voltando às telas anteriores

Para voltar para a tela anterior imediata, precisamos usar this.props.navigation.goBack();

Para voltar para a primeira tela na pilha, podemos usar navigation.popToTop(); .

Passando parâmetros para rotas

Recomenda-se que os parâmetros transmitidos sejam JSON-serializable .

Para passar parâmetros para uma rota, precisamos colocá-los em um objeto como um segundo parâmetro da função navigation.navigate : this.props.navigation.navigate('RouteName', {firstParam: 1, secondParam : 2});

Lendo parâmetros de rotas

this.props.navigation.getParam(paramName, defaultValue);

Ou,

this.props.navigation.state.params;

A primeira abordagem é recomendada porque, para a segunda abordagem, podemos obter null se nenhum parâmetro for fornecido.

Definindo o título do cabeçalho de uma tela

Precisamos usar navigationOptions aqui. navigationOptions pode ser um objeto ou uma função.

static navigationOptions = { title: "My Title", };

Para definir o título dos parâmetros fornecidos, podemos escrever assim:

static navigationOptions = ({ navigation }) => { return { title: navigation.getParam("param", "Default title"), }; };

Atualizando o navigationOptions

setParams função setParams é usada para atualizar navigationOptions .

this.props.navigation.setParams({param: "Updated value"})

Compartilhando navigationOptions

Podemos compartilhar navegação comum entre as telas.

Título com um componente personalizado

Podemos usar componentes personalizados no título usando navigationOptions :

Logo e botão juntos no título personalizado:

Controlando gaveta na navegação da gaveta

Para abrir a gaveta:

this.props.navigation.openDrawer();

Para fechar a gaveta:

this.props.navigation.closeDrawer();

Para alternar a gaveta:

this.props.navigation.toggleDrawer();

Estes são alguns usos básicos da react-navigation . Aos poucos, atualizarei esta planilha.

Roteiro feliz! 🙂

Você também pode ler:

  1. Noções básicas sobre decoradores Python
  2. Funciona como objeto de primeira classe em Python
  3. Jogando com herança em Python
  4. Encerramento em Python e Javascript
  5. Fila de prioridade mínima em C ++

Texto original em inglês.