Как обрабатывать длинный текст в FlatList в виде таблицыCSS

Разбираемся в CSS
Ответить
Anonymous
 Как обрабатывать длинный текст в FlatList в виде таблицы

Сообщение Anonymous »

У меня есть этот FlatList в React Native:
(

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

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

Сначала я намеревался оформить FlatList в виде таблицы, однако понял, что некоторые текстовые значения в теле FlatList будут слишком длинными.
Пример одного из элементов FlatList:
{
"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"
}

Как вы можете видеть, значение описания представляет собой очень длинный текст для столбца таблицы, поле заголовка также будет слишком длинным, и на некоторых экранах устройств это может вызвать настоящий беспорядок.
Вы бы порекомендовали вообще отказаться от табличного пользовательского интерфейса в мобильных приложениях?
Вот несколько стилей из первого фрагмента кода:
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,
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... d-flatlist
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»