Criando uma Lista de Contato (Parte 3 – Navigation)

Criando uma Lista de Contato (Parte 3 – Navigation)

Nesta aula iremos criar uma lista de contato utilizando os dados oriundos de um API adicionando o Navigation para um Header novo e adicionar um evento de clique na lista navegar até uma tela de detalhe.

Para criar um projeto novo veja as aulas anteriores.

Abra o projeto da aula anterior no Visual Code.

Crie na pasta src uma pasta chamada ‘pages’.

Depois adicione as dependências abaixo.

yarn add react-navigation
yarn add react-native-gesture-handler

App.js

Vamos criar um Header pelo navigation utilizando o createAppContainer e createStackNavigator.

import {createAppContainer} from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import PeoplePage from './src/pages/PeoplePage'
import PeoplePageDetails from './src/pages/PeoplePageDetails';


const StackNavigator = createStackNavigator({
  'Main': {
    screen: PeoplePage
  },
  'PeopleDetails': {
    screen: PeoplePageDetails
  }},
  {
    defaultNavigationOptions: {
      title: 'Pessoas',
      headerStyle: {
        backgroundColor: '#6ca2f7',
        borderBottomWidth: 1,
        borderBottomColor: '#c5c5c5'
      },
      headerTitleStyle: {
        color: 'white',
        fontSize: 30,
        flexGrow:1,
        textAlign: 'center'
      }
    }
  })

const AppContainer = createAppContainer(StackNavigator)

export default AppContainer

PeoplePage.js

A página principal do projeto passará a ser PeoplePage que deverá ser criada na pasta recém criada pages.


import React from 'react';
import { View } from 'react-native';
import Header from '../component/Header';
import axios from 'axios';
import PeoppleList from '../component/PeopleList'
export default class PeoplePage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      peoples: []
    }
  }

  componentDidMount(){
    axios
    .get('https://randomuser.me/api/?nat=br&results=10')
    .then(response => {
      const {results} = response.data
      this.setState({
        peoples: results
      })
    })
  }

  render(){
    return (
        <View>
            <PeoppleList 
                peoples={this.state.peoples} 
                onPressItem={() => {
                    this.props.navigation.navigate('PeopleDetails')
                    }}/>
        </View>
    );
  }

}

PeopleList.js

A página PeopleList foi alterada somente pra receber o evento de clique ‘onPressItem’ que será passado para a PeopleListItem.

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


const PeopleList = props => {
    const {peoples, onPressItem} = props
    const items = peoples.map(people => {
          return (
              <PeopleListItem 
                    key={people.name.first} 
                    people={people}
                    onPressItemDetails={onPressItem}/>
          )
        }
      )
    return (
        <View style={style.container}>
            {items}
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        backgroundColor: '#e2f977'
    },
}
)

export default PeopleList

PeopleListItem.js

O componente PeopleListItem foi alketrado para tratar o evento de clique com TouchableOpacity executando o evento recebido por props ‘onPressItemDetails’.

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import {toUpperFirst} from '../util'

const PeopleListItem = props => {
    const {people, onPressItemDetails} = props
    const {title, first, last} = people.name
    return (
        <TouchableOpacity onPress={() => {
                onPressItemDetails()
            }}>
            <View style={style.line}>
                <Image style={style.avatar} source={{uri: people.picture.thumbnail}}/>
                <Text style={style.linetext} key={first}>
                    {`${
                        toUpperFirst(title)
                    } ${
                        toUpperFirst(first)
                    } ${
                        toUpperFirst(last)
                    }`}
                </Text>            
            </View>
            </TouchableOpacity>
    )
}

const style = StyleSheet.create({
    line: {
        height: 60,
        borderBottomWidth: 1,
        borderBottomColor: '#bbb',
        alignItems: 'center',
        flexDirection: 'row'
    },
    linetext:{
        fontSize:20,
        paddingLeft: 20,
        flex: 7
    },
    avatar:{
        aspectRatio: 1,
        flex: 1,
        marginLeft: 10,
        borderRadius: 50
    }
}
)


export default PeopleListItem


PeoplePageDetails.js

A página de detalhes será trabalhada futuramente em outros artigos.

import React from 'react';
import { View, Text } from 'react-native';
export default class PeoplePageDetails extends React.Component{
  
  render(){
    return (
        <View>
            <Text>People Details Here!</Text>
        </View>
    )
  }
}

Deixe uma resposta

Specify Google Client ID and Secret in Super Socializer > Social Login section in admin panel for Google Login to work

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *