React Navigation

Instalação

$ yarn add react-navigation

IMPORTANTE:

1. Instalar as dependências exigidas na documentação (há diferença de dependências entre com e sem o Expo)

https://reactnavigation.org/docs/en/getting-started.html

2. Modificar os arquivos android/app/build.gradle e MainActivity.java conforme orientado na documentação

3. Rodar novamente o projeto com $ react-navite run-android

Configuração

Navegação por Stack

Instalação do $ yarn add react-navigation-stack

Arquivo src/routes.js

Exemplo:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import Main from './pages/Main';
import User from './pages/User';

const Routes = createAppContainer(
  createStackNavigator({
    Main,
    User,
  })
);

export default Routes;

Arquivo src/index.js

Exemplo da importação da navegação:

import React from 'react';
import { View } from 'react-native';

// import { Container } from './styles';

export default function Main() {
  return <View />;
}

Main.navigationOptions = {
  title: 'Usuários', // Cabeçalho do componente
};

Navegando entre páginas

Importar a propriedade de navegação dentro o componente. Exemplo:

function Main({ navigation }) {
  // ..
}

Para navegar entre páginas, basta utilizar a função (utilizando a propriedade navigation citada anteriormente):

<Callout // Componente apenas para exemplificar
  onPress={() => { // Função navegável
    navigation.navigate('Profile', { github_username: 'LeuAlmeida' }); // Navegando para a página Profile passando o github_username para a próxima página
  }}
>

Pegando atributos passados por outra página

Numa hipótese em que o github_username foi passado através da navegação (como no exemplo anterior), para se obter esse conteúdo dentro da página Profile basta fazer o seguinte:

function Profile({ navigation }) {                                // Obtendo as propriedades de navegação
  const githubUsername = navigation.getParam('github_username');  // Definindo a variável através do parâmetro passado na página anterior

  return (
    <WebView
      style={{ flex: 1 }}
      source={{ uri: `https://github.com/${githubUsername}` }} // Utilizando a variável anterior
    />
  );
}

export default Profile;