Navegação com NavigationContainer (Parte 1)

Vamos agora ver como criar navegação, utilizando react native, entre as telas no aplicativo. Para iniciar, copie o código abaixo, será ele o utilizado durante a aula.

import React from 'react';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Clique aqui!" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
})

Instalando bibliotecas de suporte

Antes de iniciar o desenvolvimento do código para navegação entre as telas, precisaremos instalar algumas bibliotecas.

Para a instalação, execute em seu terminal o comando abaixo:

npm install @react-navigation/native @react-navigation/native-stack

Feita a instalação, precisamos instalar as dependências necessárias. Para isso, execute no terminal o seguinte comando:

expo install react-native-screens react-native-safe-area-context

Feito isso, podemos iniciar a prática do conteúdo.

NavigationContainer

O componente NavigationContainer será utilizado para envolver as partes da aplicação que desejamos que tenham navegação. Na prática, será criado um componente para cada tela e todos eles são envolvidos pelo componente em questão.

Acompanhando o passo a passo e os conceitos apresentados durante a aula, implemente o código abaixo no arquivo App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import React from 'react';
import { Home } from './pages/home';

const Stack = createNativeStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Bem vindo" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Criando um componente

Na raiz do projeto, crie uma pasta chamada pages. Dentro de pages crie mais duas pastas que receberão os nomes dos componentes que serão criados: home e profile. Por fim, crie na pasta home um arquivo, nomeando-o de index.js.

Veja abaixo a estrutura das pastas:

Estrutura de pastas

No arquivo index.js implemente o código abaixo:

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

const Home = () => {
  return (
    <View>
      <Text>Bem vindo a tela inicial</Text>
    </View>
  )
}

export { Home }