Обтекание текста несколькими текстовыми элементами в реагирующем?

Question

Допустим, у меня есть следующий реагирующий нативный код:

//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" и после экспоненты есть разрыв строки. Я думаю, это потому, что каждый текстовый компонент слишком длинный, чтобы поместиться в пространство размером 300 пикселей.

Как избавиться от разрывов строк и разрешить только естественные разрывы строк? В идеале я хочу ограничить свои изменения Style.jsтолько. В крайнем случае, если это абсолютно необходимо, я перестрою содержание FormatText.js,

Answer 1

Ваш родительский элемент содержит стили

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

поэтому он будет переносить дочерние элементы, если их ширина меньше200

Так как ваш child elements являются multipleследовательно, тот, кто не удовлетворяет вышеуказанному условию, оборачивается целиком.

Для этого вы можете рассмотреть возможность использования вложенных 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>