Вопрос
Как использовать flexbox, чтобы текст занимал как строку, так и столбец? Я хочу, чтобы верхний левый, верхний правый и нижний левый квадрат заполнялись текстом.
Пример столбца / строки гибкого направления:
return <View style={[
{flex:1 , flexDirection: 'column' // also tried row}
]}>
<Text style={[
flex:1,
flexWrap: 'wrap',
overflow: "visible",
]}>
This is some text that I want to wrap right and then drop to the next row.
</Text>
<View style={
{
justifyContent: 'flex-end',
alignSelf: 'flex-end',
width: '25%',
height: '25%',
},
}>
</View>
</View>
}
Результат

Проблема:
Если я размещу направление гибкого кабеля в строке, текст будет охватывать только столбец, и обратное верно для направления гибкого столбца. Как разместить текст вокруг этого элемента?
Пример выравнивания:
return <Text style={[
flex:1,
flexWrap: 'wrap',
overflow: "visible",
]}>
This is some text that I want to wrap right and then drop to the next row.
</Text>
<View style={
{
justifyContent: 'flex-end',
alignSelf: 'flex-end',
width: '25%',
height: '25%',
},
}>
</View>
}
Результат

Задача
Текст по-прежнему не переносится на следующую строку или столбец.