Come creare una lista con React Native

Creare e Popolare una lista con React Native.
React è un’ottimo framework crossplatform per creare applicazioni sia per dispositivi Android che per dispositivi iOs

 Iniziamo con il creare il progetto:

react-native init listTutorial

apriamo ora la cartella che è stata appena creata listTutorial

e creiamo un file chiamato app.js, questo file lo utilizzeremo per iniziare a scrivere la nostra App.

apriamo il file appena creato app.js

Scriviamo il nostro codice:

import React, { Component } from 'react';
import { Text, ListView } from 'react-native';

export default class MainApp extends Component {
  
  constructor() {

    super();

      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

      this.state = {
        userList: ds.cloneWithRows(['Mario Rossi', 'Paolo Bianchi', 'Luca Milano']),
      };

  }

  render() {
    return (
      	<ListView
      	    dataSource={this.state.userList}
        	renderRow={(data) => <Text>{data}</Text>}
        />
    );

  }
}

A questo punto dobbiamo includere il nostro file app.js nel file index.android.js e index.ios.js. Nel mio caso sviluppando con linux, ho modificato solamente il file index.android.js come segue:

import { AppRegistry } from 'react-native';

import MainApp from './app';

AppRegistry.registerComponent('listTutorial', () => MainApp);

Avendo creato il file app.js possiamo avere un’unico sorgente per sviluppare la nostra app, ed includerlo nei rispettivi file android e ios, senza dover quindi riscrivere il codice in entrambi i file.

Proviamo ora ad eseguire la nostra app, io utilizzerò l’emulatore Android sotto Linux. Apro l’emulatore digitando

emulator @nomeEmulatore

Successivamente all’interno della cartella del progetto listTutorial digitiamo

react-native start

e  infine eseguiamo l’app digitando

react-native run-android

Buon Coding!