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

Question

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

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

现在我希望在屏幕的两端(水平方向)显示两个文本。所需效果如下所示，其中两个“hi”位于屏幕宽度的两端。

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

编辑:我们必须在这里同时完成两件事，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>