Реагировать на родное заднее центрирование ImageBackground

У меня есть изображение, на котором я пытаюсь сосредоточить на нем текст.

Для этого я использую ImageBackground, чтобы иметь дочерние элементы изображения.

Однако изображение уменьшается на небольших устройствах и, если возможно, в полном размере.

Когда я центрирую свой текст, он центрируется после соотношения всего изображения (на большом экране, где вы можете видеть все изображение, оно центрировано, а на маленьких экранах - его смещение, потому что часть изображения обрезается по размеру.

<ImageBackground style = {{ width: wp('50%'), 
                 height: hp('50%'), 
                 resizeMode: 'cover', 
                 justifyContent: 'center', 
                 alignItems: 'center' }}
                 source = {require('../assets/images/12.jpg')}>

    // if the full image is showing - it's centered, otherwise not!
    <Text style = {{ color: "red" }}>Centered text</Text>

</ImageBackground>

css reactjs image react-native imagebackground

29.05.2019 11:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 960

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

Ответы 1

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

вам нужно добавить дополнительный вид, чтобы обернуть фон изображения и добавить свойство стиля выровняйте Content и alignItems по центру, и я думаю, что это удалит вашу проблему.

<View style = {{ flex:1 , justifyContent: 'center', alignItems: 'center' }}>
    <ImageBackground

        style = {{ width: wp('50%'), height: hp('50%'), resizeMode: 'cover', justifyContent: 'center', alignItems: 'center' }}
        source = {require('../assets/images/12.jpg')}>

        // if the full image is showing - it's centered, otherwise not!
        <Text style = {{ color: "red" }}>Centered text</Text>

    </ImageBackground>
</View>

Я нахожусь на реакции, и добавление ширины в стиль изображения будет идеально центрировано.

— 21.10.2020 13:03

29.05.2019 11:41