react-native
Visualizzazione elenco

Semplice esempio

ListView - Un componente principale progettato per la visualizzazione efficiente di elenchi a scorrimento verticale di dati variabili. L'API minima consiste nel creare un oggetto ListView.DataSource, popolarlo con una semplice matrice di blob di dati e creare un'istanza di un componente ListView con tale origine dati e un callback renderRow che prende un blob dall'array di dati e restituisce un componente renderizzabile.

Esempio minimo:

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

ListView supporta anche funzionalità più avanzate, incluse sezioni con intestazioni di sezioni adesive, supporto per intestazioni e piè di pagina, callback al raggiungimento della fine dei dati disponibili (onEndReached) e dell'insieme di righe visibili nella modifica della finestra del dispositivo (onChangeVisibleRows), e diverse ottimizzazioni delle prestazioni.

Esistono alcune operazioni sulle prestazioni progettate per rendere scorrevole lo scorrimento di ListView mentre si caricano dinamicamente insiemi di dati potenzialmente molto grandi (o concettualmente infiniti):

• Rielabora solo le righe modificate: la funzione rowHasChanged fornita all'origine dati indica a ListView se è necessario eseguire nuovamente il rendering di una riga in quanto i dati di origine sono stati modificati, vedere ListViewDataSource per ulteriori dettagli.
• Rendering di righe a frequenza limitata: per impostazione predefinita, viene eseguita una sola riga per loop di eventi (personalizzabile con il puntello pageSize). Ciò suddivide il lavoro in blocchi più piccoli per ridurre la possibilità di rilasciare i frame durante il rendering delle righe.