Criando uma Lista de Contatos

Criando uma Lista de Contato

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.

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;

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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './src/component/Header'
export default function App() {
  return (
    <View>
      <Header title='Pessoas'/>
    </View>
  );
}

Criando a Lista

Para criar uma lista escreva o código abaixo. O método renderList() cria uma lista ‘names’ onde para cada item da lista ele retorna um componente View com o valor do item. Isso ocorre na função map da lista.

import React from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import Header from './src/component/Header';

export default class App extends React.Component{
  renderList(){
    const names = [
      'Maria Conceição',
      'Victor Hugo',
      'Carlos Costa',
      'João Nasciment'
    ]

    const textElements = names.map((name, index) => {
      return <Text key={index}>{name}</Text> 
      }
    )    
    return  textElements
  }
  render(){
    return (
      <View>
        <Header title='Pessoas'/>
        {this.renderList()}
      </View>
    );
  }
}

Entre pelo terminal na pasta do projeto e instale o Axios.

npm install axios --save

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 *