React Native - Data Grid

Question

Je travaille sur une application d'entreprise pour Android/iOS où les utilisateurs peuvent créer des factures en ajoutant des articles dans une grille de table/données. Je travaille avec React Native et je suis à la recherche d'un composant approprié. Les exigences ajoutent/suppriment des lignes et des cellules changeantes.

J'ai essayé quelques composants mais ils ne correspondaient pas à mes besoins.

Avez-vous une recommandation pour une grille de données sous React Native?

Answer 1

Le meilleur choix pour vos besoins est l'utilisation du composant FlatList. Il est recommandé par l'équipe react-native et ses performances sont bonnes (voir here). FlatList est également si facile à utiliser et vous pouvez en lire un document utile here. Un exemple simple de FlatList serait comme ceci:

_keyExtractor = (item, index) => item.id; 

    _renderItem = ({item}) => (
    <MyListItem 
     id={item.id} 
     title={item.title} 
    /> 
); 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     extraData={this.state} 
     keyExtractor={this._keyExtractor} 
     renderItem={this._renderItem} 
     /> 
    ); 
    } 

Vous pouvez ajouter ou supprimer un élément de la liste d'entrée de FlatList (dans cet exemple this.state.data) simplement et en passant la valeur this.state à l'hélice extraData, le FlatList sera au courant de vos changements d'état et sera mis à jour automatiquement avec les meilleures performances.