Reactjs 下一行的本机文本样式

简单地说，我试图使3个文本与图标在一列中对齐

我想给世博会图标加一点页边空白，这样它们就在每个文本元素旁边

那么，如何使文本中的下一行与文本本身对齐 例如，学校中的（S）与第五节中的（5）垂直对齐

我尝试了一些普通的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>

---

我不知道你将如何用你当前的代码做到这一点，但你可以尝试这样设置它

<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>

并为图标和文本添加样式。

---

您可以更改CardCon和cardText的弹性比率，以便为图标获得不同的宽度。

我不知道如何使用当前代码实现这一点，但您可以尝试这样设置

<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>

并为图标和文本添加样式。

---

您可以更改cardIcon和cardText的弹性比率，以便为图标获得不同的宽度。

您可以使用alignItems创建包装视图：“居中”使文本和图标垂直居中

<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>

{item.key}
.....

您可以使用alignItems创建包装视图：“居中”使文本和图标垂直居中

<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>

{item.key}
.....

可能会将

justifyContent:“center”

添加到您的文本样式中我这样做了，但没有显示位置文本的“inline flex”。可能会将

justifyContent:“center”

添加到您的文本样式中我这样做了，但没有显示：“inline flex”对于locationText。它工作正常，但有很多视图显示了良好的性能？？我对react native非常陌生，所以我不知道这个问题的答案，但我认为view-s对性能影响不大，我可能错了。它运行得很好，但是否有很多view-afect性能？我对react-native非常陌生，所以我不知道这个问题的答案，但我认为view-s对性能影响不大，我可能错了。我会试试看，但是很多视图会影响应用程序的性能吗？我认为在这种情况下没关系。我会试试看，但是很多视图会影响应用程序的性能吗？我认为在这种情况下没关系

<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>