javascript - 同一行两端的不同字体大小的文本

Question

在本机反应中，我试图在同一行上获得两种不同的字体。这部分使用嵌套可以相对容易地完成<Text>。

<Text style={{fontSize: 12}}>
  twelve<Text style={{fontSize: 14}}>fourteen</Text>
<Text>

现在我希望在屏幕的两端（水平）获得两个文本。所需的效果如下所示，其中两个“hi”位于屏幕宽度的两端。

这在本机反应中可以实现吗？如果可能的话，我想避免使用手动填充调整。

编辑：我们必须在这里同时实现两件事，1）在同一条线上，2）两端。

标签： javascriptcssreact-native

Answer 1

您可以通过 flexDirection 和 JustifyContent 实现此目的。

<View style={{
                    margin: 20,
                    flexDirection: "row",
                    justifyContent: "space-between",
                    alignItems: 'baseline',
                }}>
                    <Text style={{fontSize: 22, lineHeight: 22}}>
                        Hi
                    </Text>
                    <Text style={{fontSize: 25, lineHeight: 25}}>
                        Hi
                    </Text>
</View>