Criando uma Lista de Contato (Parte 2)

Criando uma Lista de Contato (Parte 2)

Nesta aula iremos criar uma lista de contato utilizando os dados oriundos de um API.

Para criar a lista de contato crie um projeto novo utilizando o “expo init pessoas” (ou create-react-native-app pessoas).

http://www.desafiosdeti.com.br/react/criando-o-primeiro-app-react-native/

Abra o projeto no Visual Code.

Crie a pasta src dentro do projeto e dentro desta página crie a pasta component e a pasta util.

Criando o Header

Crie o arquivo chamado Header.js na pasta component e escreva o código abaixo.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const Header = (props) => (
    <View style={style.container}>
        <Text style={style.title}>
        {props.title}
        </Text>
    </View>
);

const style = StyleSheet.create({
    container: {
        backgroundColor: '#000',
        marginTop: 25,
        alignItems: 'center',
        justifyContent: 'center'
    },
    title: {
        color: '#fff',
        fontSize: 50
    }
})

export default Header;

Criando a Lista

Crie o arquivo chamado PeopleList.js na pasta component e escreva o código abaixo.

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

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

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

export default PeopleList

Criando o Item da Lista

Crie o arquivo chamado PeopleListItem.js na pasta component e escreva o código abaixo.

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

const PeopleListItem = props => {
    const {people} = props
    const {title, first, last} = people.name
    return (
        <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>
    )
}

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

Criando a biblioteca para tratar String

Crie o arquivo chamado string.js na pasta util e escreva o código abaixo.

/*
Deixa a primeira letra maiuscula
exemplo => Exemplo
*/
const toUpperFirst = string => {
    return string[0].toUpperCase() + 
            string.slice(1)
}

export default toUpperFirst

Exportando a biblioteca de tratamento de string

Crie o arquivo chamado index.js na pasta util e escreva o código abaixo.

export { default as toUpperFirst} from './string'

Criando a Lista de Contato

No arquivo App.js escreva o código abixoa.

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

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

  render(){
    return (
      <View>
        <Header title='Pessoas'/>
        <PeoppleList peoples={this.state.peoples} />
      </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 *