Стиль текста ReactNative Следующая строка
Просто я пытаюсь сделать 3 текста со значками, выровненными в столбце
Я хочу придать значкам выставки небольшое поле сверху, чтобы они были рядом с каждым текстовым элементом.
Тогда как я могу сделать следующую строку в тексте выровненной с самим текстом Например, буква (S) в школе должна быть выровнена по вертикали с (5) в пятом классе.
I searched a lot on how to do that in react-native but with no luck
и я попробовал некоторые обычные вещи CSS, но не сработало, это достижимо?
Код :
<View style = {styles.cardView}>
<Text style = {styles.CardTextLayout} > <MaterialIcons name = "store" size = {21} color = "lightgrey" /> {item.key} </Text>
<Text style = {styles.locationText} > <Entypo name = "location-pin" size = {21} color = "lightgrey" />5th Settelment, Near Akhnaton School, Cairo</Text>
<Text style = {styles.locationText} > <MaterialIcons name = "description" size = {21} color = "lightgrey" />Breif Description about the place and what is offers</Text>
</View>
Стили
CardTextLayout: {
// marginLeft: 8,
fontSize: cardResponsiveFontSize,
fontWeight: 'bold',
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
locationText: {
fontSize: cardResponsiveFontSize,
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
я сделал но это ничего не дало
display: "inline-flex" для locationText.
Ответы 2
Я не знаю, как бы вы это сделали с вашим текущим кодом, но вы можете попробовать настроить его так.
<View style = {styles.cardView}>
<View style = {styles.cardRow}>
<View style = {styles.cardIcon}>{put your icon here}</View>
<View style = {styles.cardText}>{put your text here}</View>
</View>
...add the other 2 rows here
</View>
И стили
cardRow: {
flexDirection: "row",
flex: 1
},
cardIcon: {
flex: 1
},
cardText: {
flex: 9
}
И добавьте свои стили для значков и текста. Вы можете изменить коэффициент гибкости cardIcon и cardText, чтобы получить разную ширину значка.
Он работает нормально, но многие ли представления влияют на производительность ??
Я действительно новичок в реагировании, поэтому я не знаю ответа на этот вопрос, но я думаю, что просмотры не сильно влияют на производительность, я могу ошибаться.
Вы можете создать вид оболочки с помощью alignItems: 'center', чтобы сделать текст и значок вертикальным центром.
<View style = {styles.cardView}>
<View style = {{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name = "store" size = {21} color = "lightgrey" />
<Text style = {styles.CardTextLayout}>{item.key}</Text>
</View>
.....
</View>
я попробую, но влияет ли количество просмотров на производительность приложения?
в данном случае это не имеет значения
возможно, добавьте
justifyContent: "center"к вашему стилю текста