同一行两端的不同字体大小的文本答案

【问题标题】：Different font size text on opposite ends of the same line同一行两端的不同字体大小的文本
【发布时间】：2019-07-04 07:28:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript css react-native

【解决方案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>

【讨论】：

由于您可能希望文本位于同一行，请尝试将alignItems: 'flex-end'添加到父<View>
我已经尝试过这个，以及添加alignItems: 'flex-end'，但它们似乎不在同一行（虽然使用嵌套文本方法它们在同一行，但它们不能在相反的两端）。感谢您的尝试！
@MayankJain 抱歉，即使添加了alignItems: 'flex-end'，您的回答也不会使文本位于同一行。请试一试，仔细观察你会发现它们已关闭。
@iWillGetBetter 尝试使用 lineHeight 和 alignItems: 'baseline'
@MayankJain 你可以编辑你的答案以包含 alignItems: 'baseline'，将接受作为答案

【解决方案2】：

试试这个：

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

【讨论】：