同一行相对两端的不同字体大小的文本

Question

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

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

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

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

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

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>

Answer 2

尝试一下：

<Text 
  style={{ fontSize: 15 }}>Hi 
    <Text style={{ fontWeight: 'bold', fontSize: 30 }}>Hi
    </Text>
</Text>