Flat list : UI : ReactNative

Introdução

Objetivos:

• criar uma nova tela com a lista de moedas (currencies).

componentes react native

• FlatList: compomente performático e multiplataforma para apresentar dados em lista.

Sumário

1. Inicie o app e abra no dispositivo;
2. Crie e edite o arquivo de dados app/data/currencies.js
3. Crie e edite o arquivo de tela app/screens/CurrencyList.js
4. Edite o arquivo app/index.js

Passo 1. Inicie o app e abra no dispositivo app/components/Header

cd CurrencyConverter
yarn start

Passo 2. Crie e edite o arquivo de dados app/data/currencies.js

mkdir app/data
touch app/data/currencies.js

com editor copie o conteúdo do arquivo do final desta página.

Passo 3. Crie e edite o arquivo de tela app/screens/CurrencyList.js

touch app/screens/CurrencyList.js

com editor copie o conteúdo do arquivo do final desta página.

Passo 2. Edite o arquivo app/index.js

Com editor copie o conteúdo do arquivo do final desta página. Será substituído a apresentação da tela Home pela tela CurrencyList

Códigos-fonte

snack expo

app/data/currencies.js

export default [
  'AUD',
  'BGN',
  'BRL',
  'CAD',
  'CHF',
  'CNY',
  'CZK',
  'DKK',
  'EUR',
  'GBP',
  'HKD',
  'HRK',
  'HUF',
  'IDR',
  'ILS',
  'INR',
  'JPY',
  'KRW',
  'MXN',
  'MYR',
  'NOK',
  'NZD',
  'PHP',
  'PLN',
  'RON',
  'RUB',
  'SEK',
  'SGD',
  'THB',
  'TRY',
  'USD',
  'ZAR',
];

app/screens/CurrencyList.js

import React, { Component } from 'react';
import { FlatList, Text, StatusBar, View } from 'react-native';

import currencies from '../data/currencies';

class CurrencyList extends Component {
  handlePress = () => {
    console.log('row press');
  };

  render() {
    return (
      <View style=>
        <StatusBar translucent={false} barStyle="default" />
        <FlatList
          data={currencies}
          renderItem={({ item }) => <Text>{item}</Text>}
          keyExtractor={item => item}
        />
      </View>
    );
  }
}

export default CurrencyList;

app/index.js

import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';

import CurrencyList from './screens/CurrencyList';

EStyleSheet.build({
  $primaryBlue: '#4F6D7A',
  $white: '#FFFFFF',
  $lightGray: '#F0F0F0',
  $border: '#979797',
  $inputText: '#797979',
});

export default () => <CurrencyList />;