React Native：文本和图标内联

Posted 2023-02-22

【中文标题】React Native：文本和图标内联

【英文标题】：React Native: Text and Icon inline

【发布时间】：2019-06-07 21:24:49

【问题描述】：

我正在尝试将一个图标和一个内联文本对齐，并将文本向左对齐，图标向右对齐...

这是它目前的样子：

但是，我想让文本左对齐，图标右对齐，而且两者高度相同...

到目前为止我的代码：

<Text
  style=
    fontSize: 16,
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 10,
    paddingRight: 10,
    color: "black"
  
>
  Kategorien:
  <Icon
    style=
      alignItems: "center",
      justifyContent: "center",
      textAlign: "right"
    
    name="keyboard-arrow-down"
    type="MaterialIcons"
  />
</Text>

我也尝试过使用 react native 元素并利用左右元素，但是，在这种情况下，图标和文本不是内联的......

<View>
  <Left>
    Text...
  </Left>
  <Right>
    Icon...
  </Right>
</View>

你们有什么想法吗？

【参考方案1】：

您需要使用 View 您的 Text 和 Icon 组件进行包装。您可以在其中设置水平和垂直填充。

       <View style=
            paddingVertical: 15,
            paddingHorizontal: 10,
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center"
        >
            <Text style=
                    fontSize: 16,
                    color: "black"
                >Kategorien:</Text>
            <Icon/>
        </View>

【讨论】：

可以试试不带style Icon吗（不要设置任何高度或宽度）

看起来不错，但我会推荐alignItems: 'baseline',