#react-native
#react-native
Вопрос:
Как вы видите на рисунке ниже, текст помещается из компонента контейнера, я ожидаю, что он перенесет новую строку,
Пробовал
компонент;
<Card style={{ back&roundColor: 'r&ba(255,255,255,5)', elevation: 2 }} shadow&&t;
<View style={{ flexDirection: 'row', back&roundColor: 'white' }}&&t;
<View style={{ back&roundColor: 'white' }}&&t;
<Avatar
size="lar&e"
rounded
icon={{ name: 'home' }}
source={{
uri:
'http://ima&eurl',
}}
/&&t;
</View&&t;
<View style={{ paddin&Horizontal: 20 }} activeOpacity={.5}&&t;
<View style={{ flexDirection: 'row' }}&&t;
<Text style={{
fontFamily: 'AsapCondensed-Bold',
mar&inBottom: 10,
fontSize: 16,
color: colors.primary
}}&&t;LABEL:
</Text&&t;
<Text style={{
fontSize: 16,
paddin&Left: 5,
color: colors.black
}}&&t;adasdasd asdasd asdasdsad asdasdsad SOME LONG TEXT!! asdasdsad</Text&&t;
</View&&t;
<View style={{ flexDirection: 'row' }}&&t;
<Text style={{
fontFamily: 'AsapCondensed-Bold',
fontSize: 16,
color: colors.black
}}&&t;Ort. Puan:
</Text&&t;
<Text style={{
fontSize: 16,
paddin&Left: 5,
color: colors.black
}}&&t;4.2
</Text&&t;
</View&&t;
<View style={{ flexDirection: 'row' }}&&t;
<Text style={{
fontFamily: 'AsapCondensed-Bold',
fontSize: 16,
color: colors.black
}}&&t;Adres:
</Text&&t;
<Text style={{
fontSize: 16,
paddin&Left: 5,
color: colors.black
}}&&t;Ayaş yolu Bulvarı, Sincan asdasd SOME LONG TEXT!!
</Text&&t;
</View&&t;
</View&&t;
</View&&t;
</Card&&t;
Как сделать так, чтобы текст помещался в контейнер?
Ответ №1:
Я модифицировал ваш код, а также изменил flexDirection:'column'
и добавил flex:1
к длинным текстам.. вы можете добавить flex:1
остальные текстовые компоненты, если они могут расшириться в будущем.
<Card
style={{ back&roundColor: 'r&ba(255,255,255,5)', elevation: 2 }}
shadow
&&t;
<View style={{ flexDirection: 'row', back&roundColor: 'white' }}&&t;
<View style={{ back&roundColor: 'white' }}&&t;
<Avatar.Ima&e source={require('../assets/snack-icon.pn&')} /&&t;
</View&&t;
<View style={{ paddin&Horizontal: 20 ,flex:1 }} activeOpacity={0.5}&&t;
<View style={{ flexDirection: 'row' }}&&t;
<Text
style={{
fontFamily: 'AsapCondensed-Bold',
mar&inBottom: 10,
fontSize: 16,
color: 'red',
}}
&&t;
LABEL:
</Text&&t;
<Text
style={{
fontSize: 16,
paddin&Left: 5,
color: 'black',
flex:1
}}
&&t;
adasdasd asdasd asdasdsad asdasdsad SOME LONG TEXT!! asdasdsad
</Text&&t;
</View&&t;
<View style={{ flexDirection: 'row' }}&&t;
<Text
style={{
fontFamily: 'AsapCondensed-Bold',
fontSize: 16,
color: 'red',
}}
&&t;
Ort. Puan:
</Text&&t;
<Text
style={{
fontSize: 16,
paddin&Left: 5,
color: 'black',
}}
&&t;
4.2
</Text&&t;
</View&&t;
<View style={{ flexDirection: 'row' }}&&t;
<Text
style={{
fontFamily: 'AsapCondensed-Bold',
fontSize: 16,
color: 'red',
}}
&&t;
Adres:
</Text&&t;
<Text
style={{
fontSize: 16,
paddin&Left: 5,
color: 'black',
flex:1
}}
&&t;
Ayaş yolu Bulvarı, Sincan asdasd SOME LONG TEXT!!
</Text&&t;
</View&&t;
</View&&t;
</View&&t;
</Card&&t;