Navegação com NavigationContainer (Parte 2)

Na primeira parte criamos um componente Home, porém, ainda não existe navegação no aplicativo. Então, faremos agora esse trabalho.

Aplicando estilo no componente

O componente criado anteriormente não possuía estilo, o que dificulta a percepção de mudança de tela. Então, para diferenciar as telas, vamos aplicar uma leve estilização.

Em seu componente Home adicione a estilização, de modo que seu código fique como se vê abaixo:

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

const Home = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Bem vindo a tela inicial</Text>
    </View>
  )
}

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

export { Home }

Criando o componente Profile

Agora, iremos criar o componente profile, que será a segunda tela do aplicativo. Para fazer isso, tomaremos como base o componente Home, alterando apenas algumas informações.

Seu componente deve ficar como se vê abaixo:

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

const Profile = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Profile</Text>
    </View>
  )
}

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

export { Profile }

De posse do novo componente, importe-o no App.js e adicione uma nova Stack Screen ao NavigationContainer.

<Stack.Screen name="Profile" component={Profile} />

Mudando de tela

Até o momento, foram implementados os componentes, porém, ainda não há navegação entre as telas.

Para navegar entre as telas, criaremos um botão no componente Home. Além disso, vamos utilizar uma propriedade que advém do Stack Screen denominada de navigation.

Acompanhando a aula, altere seu componente Home para ficar como abaixo:

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Bem vindo a tela inicial</Text>
      <Button title="Profile" onPress={() => { navigation.navigate('Profile', { name: 'Profile' }) }} />
    </View>
  )
}

Além disso, precisamos alterar também o componente Profile para ficar como abaixo:

const Profile = ({ navigation, route }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Está é a página {route.params.name}</Text>
    </View>
  )
}

Com essas modificações e implementações, já temos um aplicativo com navegação entre telas.