У меня есть этот 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
Как обрабатывать длинный текст в FlatList в виде таблицы ⇐ CSS
Разбираемся в CSS
-
Anonymous
1764834254
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,
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79832004/how-to-handle-long-text-in-a-table-styled-flatlist[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия