Разбиение пользовательских компонентов на несколько строк

Я хочу отобразить список в React Native. Элементы списка должны быть очень простыми, по крайней мере, в теории. Он имеет заголовок и тело. Заголовок не проблема. Это просто компонент Text. Но я борюсь с компонентом тела.

Вот так элемент списка выглядит сейчас:

Ниже приведена иллюстрация того, как я хотел бы, чтобы элемент списка выглядел:

Как видите, желаемым результатом будет размещение всех компонентов в теле рядом друг с другом по горизонтали (flexDirection: 'row'), для этого потребуется, чтобы часть пользовательского компонента (см. новую строку, если она не соответствует предыдущей строке.

Это текущий код (для краткости я пропустил код компонента заголовка):

Родительский вид:

const ListItemBody = props => {
  return <View style = {{flexDirection:'row',flexWrap:'wrap',justifyContent:'flex-start'}}>{props.children}</View>;
};

props.children содержит x ListItemBodyElement:

const ListItemBodyElement = props => {
  return (
    <View style = {{flexDirection:'row'}}>
      {props.icon && <props.icon style = {styles.icon} name = {props.iconName} />}
      <Text style = {{...styles.label, ...props.labelStyle}}>{props.label}</Text>
    </View>
  );
};

Можно ли добиться желаемого результата?
Заранее спасибо. /Ариф

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте установить word-break: break-all на Text.

Это должно предотвратить переполнение текста и приблизить его к желаемому результату.

Подробнее о переносе слов

Пример:

<Text style = {{ ...styles.label, ...props.labelStyle, wordBreak: "break-all" }}>
  {props.label}
</Text>

Надеюсь, это поможет!

спасибо за ваш ответ, но добавление слова Break: «break-all» ничего не изменило.

arif 17.11.2022 23:29
Ответ принят как подходящий

Попробуйте визуализировать все элементы в текстовом компоненте. Это должно упорядочить их последовательно и разместить негабаритный контент на новой строке.

const ListItemBody = props => {
  return <View style = {{flexDirection:'row',flexWrap:'wrap',justifyContent:'flex-start'}}>
    <Text>{props.children}</Text>
  </View>;
};

спасибо за ответ @Abe ... он сделал только половину работы, упорядочив компоненты последовательно. Однако текст больше не переходит на новую строку. Он продолжается горизонтально за пределы экрана и прерывается только на новом компоненте тела.

arif 18.11.2022 09:51

Может быть, поставить фиксированную ширину в стили родительского View? width: '100%' или что-то в этом роде

Abe 18.11.2022 18:45

Я тоже пробовал это, но это не сработало, все еще имея переполнение.

arif 19.11.2022 20:03

@Abe..Это были теги View в ListItemBodyElement, которые вызвали переполнение. Я заменил View теги фрагментами, и это сработало: const ListItemBodyElement = props => { return ( <> {props.icon && <props.icon style = {styles.icon} name = {props.iconName} />} <Text style = {{...styles.label, ...props.labelStyle}}>{props.label}</Text> </> ); };/Спасибо

arif 23.11.2022 23:15

Интересно, хорошая находка!

Abe 24.11.2022 03:23

Другие вопросы по теме