У меня есть этот 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
