Allineare correttamente un ListView in react-native - flexbox, react-native

Ho uno schermo nel mio react-native app dove sto mostrando i dettagli di un record. E 'una schermata piuttosto semplice dove sulla colonna di sinistra, ho un'etichetta che descrive l'oggetto e sulla destra, ho il valore dell'oggetto. Per uno dei valori, devo rendere un ListView e non sono in grado di allinearlo correttamente. Di seguito l'app di esempio su rnplay con i sintomi:

App di esempio su rnplay

Si prega di eseguire su iOS. Qui ComponentListView è un componente riutilizzabile che sto usando per renderizzare ListView e ci vuole un component e data come sostiene e rende ogni voce nel data usando il passato component. Qui la lista è BackupList e il componente da rendere in ogni riga è BackupSummary. Se esegui l'app, noterai che i backup non sono allineati correttamente. L'ho eseguito nel Inspector sul simulatore e sembra il ListView inizia da dove Varun Accepted è visto. Non sono sicuro del perché. In questo momento c'è solo un elemento nel this.props.backupContacts ma potrebbero essercene di più Ho provato molti diversi flexbox proprietà come alignItems, justifyContent, alignSelf per farlo funzionare senza successo.

Per favore fatemi sapere se sapete come risolverlo.

risposte:

Metti il ​​tuo Visualizzazione elenco all'interno di una vista e applica css sulla vista, qualcosa del genere

<View style={{display:"flex", flexDirection:"row", justifyContent:"center"}}>
<ListView/>
</View>