Как охватить строку и столбец в React Native? - PullRequest
1 голос
/ 30 июня 2019

Вопрос
Как использовать 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>
}

Результат
example_image

Проблема: Если я размещу направление гибкого кабеля в строке, текст будет охватывать только столбец, и обратное верно для направления гибкого столбца. Как разместить текст вокруг этого элемента?


Пример выравнивания:

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

Результат
no_flex_direction_example

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...