Exercicio de navegação react native PDF

Preview

Summary

Exercicio com stack navigation em react native...

Description

Exercício para criar aplicativo utilizando navegação stack em react native

Vamos criar um aplicativo que exibe dois jogadores. Cada jogador deve ter um botão para aumentar sua pontuação. Quando o usuário clicar em resultado, o aplicativo deve exibir uma tela com o vencedor, ou seja, mostrar o jogador com mais pontos. É um aplicativo simples porem de bom aprendizado para utilizar navegação stack em react native.

O primeiro passo é configurar o package.json

{ "dependencies": { "react-navigation": "3.0.0-rc.5", "react-native-paper": "3.6.0" } }

Essas são as depencendias que vamos usar. O react navigation é para a navegação do aplicativo.

O react native paper é uma coleção de componentes customizaveis, para dar um visual no aplicativo.

Agora vamos criar uma pasta chamada screens. Dentro dela terá dois arquivos:

Home.js Resultado.js

Cada arquivo será responsável por guardar o codigo de cada página.

Após a criação da pasta e dos arquivos, vamos editar o app.js. Vamos importar os componentes e os arquivos de cada página. O código ficará assim:

import * as React from 'react';

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

import Home from './screens/Home'; import Resultado from './screens/Resultado';

Abaixo desse código, vamos declarar a váriavel MainStack e nela criar o stack navigator, responsável por guardar as páginas de navegação

const MainStack = createStackNavigator( { Home, Resultado }, { headerLayoutPreset: 'center', } );

Ao final, vamos exportar a função createAppContainer com o parametro MainStack, que criamos anteriormente

export default createAppContainer(MainStack);

A navegação está pronta, agora vamos editar cada página. Vamos no arquivo navegação e escrever o seguinte código devidamente explicado abaixo de cada codigo:

import React, { Component } from 'react'; import { View, Text, StyleSheet, ScrollView, Button, TouchableOpacity, } from 'react-native';

//Aqui importamos o que vamos usar -----------------------------------------------------------------------------------export default class Home extends Component { static navigationOptions = { title: 'Home', };

//Aqui exportamos o componente Home -----------------------------------------------------------------------------------constructor(props) { super(props); this.state = { pontuacaoJog1: 0, pontuacaoJog2: 0, }; }

//Aqui definimos o estado inicial -----------------------------------------------------------------------------------render() { return (



{this.state.pontuacaoJog1} { this.setState({ pontuacaoJog1: this.state.pontuacaoJog1 + 1 }); }}> Jogador 1

//Aqui exibimos o jogador 1 e seu botão para aumentar a pontuação ----------------------------------------------------------------------------------- {this.state.pontuacaoJog2} { this.setState({ pontuacaoJog2: this.state.pontuacaoJog2 + 1 }); }}> Jogador 2

//Aqui exibimos o jogador 2 e seu botão para aumentar a pontuação

----------------------------------------------------------------------------------- { this.props.navigation.navigate('Resultado', { resultado: (this.state.pontuacaoJog1 > this.state.pontuacaoJog2) ? "Jogador 1" : (this.state.pontuacaoJog1 < this.state.pontuacaoJog2) ? "Jogador 2" : "Empate" }); }}> RESULTADO



); } }

//Aqui exibimos o botão resultado, este botão nos leva para a pagina resultado. ------------------------------------------------------------------------------------

Agora vamos paga o arquivo Resultado.js e vamos escrever o seguinte código, devidamente explicado em cada item:

import React, { Component } from 'react'; import { View, Text, StyleSheet, ScrollView, Button, TouchableOpacity } from 'react-native';

//Aqui importamos o que vamos usar

-----------------------------------------------------------------------------------export default class Resultado extends Component { static navigationOptions = { title: 'Resultado', };

//Aqui exportamos o componente Resultado -----------------------------------------------------------------------------------render() { const { params } = this.props.navigation.state return (

{params.resultado}

) } }

//Aqui exibimos o resultado Para a estilização, faça const styles = StyleSheet.create({}) e faça como lhe agradar mais....