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本机元素并使用right和left元素，但是，在这种情况下，图标和文本不是内联的...

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

你们有什么主意吗？

Answer 1

您需要使用“查看文本和图标”组件包装。而且您可以在那里设置水平和垂直填充。

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