Проблема с макетом flex-box в React Native

Допустим, есть контейнер квадратной формы, Как убедиться, что B находится в центре, а A находится в верхнем левом углу, как на картинке?

Если я поместил B в представление и поместил justifyContent в центр, B центрировался только по пространству, оставшемуся между A и нижней частью контейнера. Как сделать так, чтобы А не толкнул В вниз?

react-native flexbox

24.11.2022 03:20

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В этом случае вы можете использовать position: 'absolute' вместо A.

<View style = {{ height: 100, width: 100, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center' }}>
  <Text style = {{ position: 'absolute', top: 0, left: 0, color: 'white' }} >A</Text>
  <Text style = {{ color: 'white' }} >B</Text>
</View>

24.11.2022 04:30

Другие вопросы по теме

Bootstrap 5 Изменить класс заполнения CSS для свернутых элементов?

Где добавить тег span, который разделяет содержимое

Flexbox div не занимает все вертикальное пространство

Свойство flexbox, реагирующее на попутный ветер, не работает должным образом

Обходной путь Flexbox для Safari

Выровняйте несколько текстовых полей в ряд, реагируя на родной

Расположите выдвижную панель под верхней навигацией

Как остановить нежелательное движение ссылки при наведении курсора с помощью «Flex» в качестве отображения?

Как выровнять правильно, когда срабатывает flex-wrap, но в противном случае выровнять пространство между содержимым?

Мои контейнеры flexbox не реагируют на flex-direction:column

Проблема с макетом flex-box в React Native

Ответы 1

Другие вопросы по теме

Похожие вопросы