Я хочу отобразить список в 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>
);
};
Можно ли добиться желаемого результата?
Заранее спасибо.
/Ариф
Попробуйте установить word-break: break-all
на Text
.
Это должно предотвратить переполнение текста и приблизить его к желаемому результату.
Пример:
<Text style = {{ ...styles.label, ...props.labelStyle, wordBreak: "break-all" }}>
{props.label}
</Text>
Надеюсь, это поможет!
Попробуйте визуализировать все элементы в текстовом компоненте. Это должно упорядочить их последовательно и разместить негабаритный контент на новой строке.
const ListItemBody = props => {
return <View style = {{flexDirection:'row',flexWrap:'wrap',justifyContent:'flex-start'}}>
<Text>{props.children}</Text>
</View>;
};
спасибо за ответ @Abe ... он сделал только половину работы, упорядочив компоненты последовательно. Однако текст больше не переходит на новую строку. Он продолжается горизонтально за пределы экрана и прерывается только на новом компоненте тела.
Может быть, поставить фиксированную ширину в стили родительского View? width: '100%'
или что-то в этом роде
Я тоже пробовал это, но это не сработало, все еще имея переполнение.
@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> </> ); };
/Спасибо
Интересно, хорошая находка!
спасибо за ваш ответ, но добавление слова Break: «break-all» ничего не изменило.