ReactNative – Criando uma Lista de Contato

1- Instalar o yarn

npm install -global yarn

2- Criar um projeto utilizando Expo. Antes acesse a uma pasta onde deseja que o projeto seja criado.

expo init listacontatonative

3- Acesse a pasta do projeto criada listacontatonative e start o servidor

yarn start

4- Uma vez iniciado o servidor, você verá um QR Code no terminal. Use a câmera do seu celular, e uma vez lido o QR Code irá aparecer um aviso para abrir no Expo. Abra o Expo e após a criação do bundle o aplicativo estará rodando no seu celular com live reload habilitado.

Analise os arquivos do projeto

  • App.js: é onde está o nosso aplicativo, que por enquanto é basicamente um “hello world”;
  • App.test.js: um teste automatizado com o jest, que faz uma simples assertion se a app foi renderizada;
  • .watchmanconfig: o arquivo de configuração do Watchman, que faz o live reload acontecer;
  • app.json: onde você pode mudar o nome da app, ícone e diversas outras configurações;
  • package.json: aqui já temos os scripts de build para Android e iOS, além do test, start e por fim o eject, que pode ser usado para “ejetar” as configurações de build, para a sua aplicação;
  • README.md: diversas informações sobre o que foi boostrapped ao usar o CRNA.

Veja com detalhe como instalar um ambiente para ReactNative e criar o primeiro projeto no vídeo abaixo.


Criando a Lista

5- Entre pelo terminal na pasta do projeto e abra o projeto no visual code.

code .

6- Crie o arquivo chamado PeopleList.js na pasta component (criar a pasta src na raiz e depois component dentro de src) e escreva o código abaixo.

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

8- Crie o arquivo chamado string.js na pasta util (criar a pasta util na pasta src) e escreva o código abaixo.

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

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

npm install axios --save

11- No arquivo App.js escreva o código abaixo.

12- Salve todos os arquivos e teste.

yarn start

13- Crie na pasta src uma pasta chamada ‘pages’.

14- Adicione a dependência abaixo:

yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-gesture-handler
yarn add @react-native-community/masked-view
yarn add react-native-screens
yarn add react-native-reanimated

15- Crie a página PeoplePage.js na pasta pages e coloque o código abaixo:

16- Crie a página PeopleDetailsPage.js na pasta pages e coloque o código abaixo:

17- Altere o componente PeopleList.js para receber o evento de clique ‘onPressItem’ que será passado para a PeopleListItem.

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

19- Altere o arquivo App.js com o código abaixo:

Usando o DrawerNavigator

19- Adicione a dependência abaixo:

yarn add @react-navigation/drawer

19- No arquivo App.js atualize para o código abaixo:

Link do repositório do Github:

https://github.com/totemarcal/listaDeContatoReactNative

Segue abaixo passo-a-passo de como fazer um mock de uma api rest.

https://medium.com/@renato.groffe/mockable-io-criando-rapidamente-mocks-de-apis-rest-para-testes-b0f54032be3b

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 *