Umgang mit langem Text in einer FlatList im Tabellenstil ⇐ CSS

[Anonymous]

Ich habe diese FlatList in React Native:

Code: Select all

 (

{item.header}
{status_labels[item.status]
{item.description}
{item.outcome}

)}
keyExtractor={(item, index) => index.toString()}
stickyHeaderHiddenOnScroll={true}
/>

Ich hatte ursprünglich vor, die FlatList als Tabelle zu formatieren, musste jedoch feststellen, dass bestimmte Textwerte im Hauptteil der FlatList viel zu lang wären.
Ein Beispiel für eines der FlatList-Elemente ist:

Code: Select all

{
"description": "During a scheduled visit, the support worker missed a required medication prompt for the client. The omission was identified later in the shift during a review of visit notes. Although the medication was given once noticed and no harm occurred, this represents a breach of medication procedures. The incident has been recorded as a disciplinary case, and a review will be carried out to determine any required corrective action.",
"header": "Reference to medication error incident",
"outcome": "No outcome yet",
"status": "open"
}

Wie Sie sehen können, handelt es sich bei dem Beschreibungswert um einen sehr langen Text für eine Tabellenspalte. Das Kopfzeilenfeld wäre ebenfalls zu lang und könnte auf bestimmten Gerätebildschirmen ein ziemliches Durcheinander verursachen.
Würden Sie generell von der tabellarischen Benutzeroberfläche in mobilen Apps abraten?
Hier sind einige der Stile aus dem ersten Codeausschnitt:

Code: Select all

listHeader: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
gap: 10,
paddingVertical: 12,
paddingHorizontal: 12,
backgroundColor: PURPLE[200],
marginHorizontal: 'auto',
width: '95%',
borderRadius: 8,
borderWidth: 1,
},

listHeaderText: {
fontSize: 13,
fontWeight: 'bold',
color: '#4b4949ff',
width: 70,
},

listItem: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
gap: 10,
marginHorizontal: 'auto',
width: '95%',
borderWidth: 1,
},

listItemText: {
fontSize: 12,
color: '#4b4949ff',
textAlign: 'center',
width: 70,
borderWidth: 1,
}