React Native：文本和图标内联

Question

我正在尝试将一个图标和文本水平对齐，并将文本对齐到左侧，图标对齐到右侧...

目前它的显示效果如下：

然而，我希望文本对齐到左侧，图标对齐到右侧，且两者位于同一高度...

迄今我的代码为：

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

你们有什么想法吗？

- Jan

Answer 1

你需要用 View 组件来包裹 Text 和 Icon 组件。然后你可以在其中仅设置水平和垂直的 padding。

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

- sdkcy

---

你能试一下不设置样式图标（不设置任何高度或宽度）吗？ - sdkcy

看起来不错，但我建议使用 alignItems: 'baseline',。 - Karl Adler

如果文本换行，图标将不再内联。 - John Miller