反应原生的几个文本元素的文本包装?

时间:2018-03-28 13:41:51

标签: react-native textwrapping

假设我有以下反应本机代码:

//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 }
};

我看到以下输出:

this

问题是“Super Pizza Store”之后和指数之后有一个换行符。我想这是因为每个Text组件太长而无法容纳在300px的空间中。

如何摆脱换行符,只允许自然换行?理想情况下,我希望仅将更改限制为Style.js。作为最后的手段,如果绝对必要,我将重新构建FormatText.js的内容。

1 个答案:

答案 0 :(得分:1)

您的父元素包含样式

flexDirection:"row",flexWrap:"wrap",width:300,padding:10

因此,如果宽度小于200

,它将包装子元素

由于您的child elementsmultiple,因此,如果不满足上述条件,则将整个包裹起来。

为此,您可以考虑使用嵌套的Text elements作为嵌套的

<View style={styleOptions.container}>
            <Text style={styleOptions.regular}>Hello world I am going to eat some Pizza for the sake of eating pizza.
            <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></Text>
        </View>