ReactNative文字样式下一行

Question

只是我想使3个带有图标的文本在列中对齐

我想给博览会图标留一点空白，以便它们位于每个文本元素旁边

然后如何使文本中的下一行与文本本身对齐？例如，学校中的（S）与第5个中的（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,
  },

Answer 1

我不知道您将如何使用当前代码执行此操作，但是您可以尝试像这样进行设置。

<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的弹性比率，以使图标的宽度不同。

Answer 2

您可以使用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>