在React Native中如何对多个文本元素进行文本换行？

Question

假设我有以下React Native代码：

//FormatText.js

 <View style={styleOptions.container}>
<Text style={styleOptions.regular}>
    Hello world I am going to eat some Pizza for the sake of eating pizza.{" "}
</Text>
<Text style={[{ fontWeight: "bold" }, styleOptions.strong]}>
    Super Pizza Store.{" "}
</Text>
<Text style={styleOptions.regular}>You will pay $10</Text>
<Text style={[{ textAlignVertical: "top" }, styleOptions.superscript]}>
    8
</Text>
<Text style={styleOptions.regular}>. I doubt you can afford it.</Text>
</View>;

而styleOptions是在这个文件中定义的。

//Style.js
 const styleOptions = {
container: {
    flexDirection: "row",
    flexWrap: "wrap",
    width: 300,
    padding: 10
},
regular: { fontSize: 13 },
superscript: { fontSize: 8 },
strong: { fontSize: 13 }
};

我看到了下面的输出:

问题是在“Super Pizza Store”和指数后面有一个换行。我想这是因为每个文本组件都太长，无法适应300px的空间。

如何消除换行符并仅允许自然换行？理想情况下，我只想限制对Style.js的更改。如果绝对必要，我将重构FormatText.js的内容作为最后的手段。

- John

---

给所有文本组件添加边框或背景颜色以可视化Text组件框。你会发现Text组件创建了一个包含所有文本的矩形框。第一个组件创建了一个2行框，这就是为什么第二个组件无法填充其余部分的原因。 - bennygenel

@bennygenel 基本上你的意思是我不能仅通过修改 Style.js 来达到我想要的结果？ - John

我对此并不确定。也许有一种方法。我只是想澄清当前结果发生的原因。你可能可以使用一些我不知道的 CSS 技巧来实现所需的效果。 - bennygenel

基本上我理解一些<Text>块会呈现为矩形块，这就是为什么它会将下一个文本块挤到另一行的原因。我猜没有样式规则可以将后续的文本块视为自然换行的“字符串”吧？ - John

Answer 1

您的父级元素包含以下样式： flexDirection:"row",flexWrap:"wrap",width:300,padding:10 因此，如果子元素的宽度小于 200，它们将被自动换行。

由于您的子元素是多个，因此不满足上述条件的整个子元素都会被换行。

为此，您可以考虑使用嵌套的

- Pritish Vaidya

---

感谢您的建议。您提出的解决方案引发了另一个问题，我在此解释：https://stackoverflow.com/questions/49536698/superscript-style-is-broken-in-my-react-native - John

完美运行，谢谢！ - chenop