Criando a estrutura

Para iniciar, utilizaremos um projeto simples, resultado do comando abaixo:

expo init ProjectName

Instalando bibliotecas

Como pudemos ver na apresentação do projeto, serão criadas duas telas: uma com a listagem das postagens e outra com os detalhes de cada post. Então, será preciso criar a navegação entre as telas.

Antes, porém, precisamos instalar algumas bibliotecas para o bom funcionamento do código.

Execute em seu terminal os comandos abaixo:

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

Em seguida:

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

Navegação entre telas

Antes de tudo, para utilizar a navegação precisaremos iniciar a Stack. Para isso, faz-se necessário a importação de uma função e a chamada no código.

Veja o exemplo abaixo:

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator()

Como já visto na aula de navegação, temos de envolver toda a parte que desejamos que haja navegação com um componente denominado NavigationContainer. Esse componente envolverá as Stack Screen, que recebem como uma de suas propriedades o componente.

Ao serem exibidos na tela, os componentes, utilizando a navegação, exibem um cabeçalho com o nome da tela atual. Para remover essa informação, além das propriedades principais (name e component), adicionaremos uma prop chamada de options que setará o headerShown para falso.

Veja o exemplo abaixo:

<NavigationContainer>
      <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} options={{headerShown: false}}></Stack.Screen>
          <Stack.Screen name="BlogPost" component={PostPage} options={{headerShown: false}}></Stack.Screen>
      </Stack.Navigator>
</NavigationContainer>

Criando os componentes

Foram passados os componentes para a Stack Screen, porém, ainda é necessário criá-los. Então, na raiz do projeto, crie uma pasta chamada pages e nela crie as pastas home e post com seus respectivos índices. Veja a estrutura abaixo:

Estrutura de pastas

Acompanhando a aula, implemente os arquivos como abaixo:

home/index.js

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

export default function Home() {
    return <View><Text>Home</Text></View>
}

post/index.js

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

export default function BlogPost() {
    return <View><Text>BlogPost</Text></View>
}